Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add en versions of browser commands #17

Merged
merged 2 commits into from
Jul 16, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
---
slug: _dollardollar
sidebar_label: $$
---

import Admonition from "@theme/Admonition";

# $$

## Overview {#overview}

Use the `$$` command instead of [findElements][find-elements] as a shorter command to get multiple elements on the page.

The `$$` command returns an array with the desired elements, on each of which you can call action commands without passing the selector. However, if you do pass a selector, it will first find the corresponding element and then call the action for that element.

You can chain `$` or `$$` together to traverse down the DOM tree.

<Admonition type="info">
Read more about how to select specific elements in the recipe "[How to use
selectors][how-to-use-selectors]".
</Admonition>

## Usage {#usage}

```javascript
await browser.$$(selector);
```

## Command Parameters {#parameters}

<table>
<thead>
<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
</thead>
<tbody>
<tr><td>selector</td><td>String or Function</td><td>Selector or JS function to get multiple elements.</td></tr>

</tbody>
</table>

## Examples {#examples}

**index.html**

```html
<ul id="menu">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/">Developer Guide</a>
</li>
<li>
<a href="/">API</a>
</li>
<li>
<a href="/">Contribute</a>
</li>
</ul>
```

**$.js**

```javascript
it("should get text of a menu link", async ({ browser }) => {
const text = await browser.$$("#menu")[0];

console.log(await text.$$("li")[2].$("a").getText()); // outputs: "API"
});

it("should get text of a menu link - JS Function", async ({ browser }) => {
const text = await browser.$$(function () {
// Arrow function cannot be used here.
// This is Window – https://developer.mozilla.org/en-US/docs/Web/API/Window
//
// TypeScript users can do something like:
// return (this as Window).document.querySelectorAll('#menu')
return this.document.querySelectorAll("#menu"); // Element[]
})[0];

console.log(await text.$$("li")[2].$("a").getText()); // outputs: "API"
});
```

## Related Commands {#related}

- [browser.$](../_dollar)
- [element.$](../../element/_dollar)
- [element.$$](../../element/_dollardollar)

[find-elements]: https://webdriver.io/docs/api/webdriver/#findelements
[how-to-use-selectors]: https://webdriver.io/docs/selectors
115 changes: 115 additions & 0 deletions i18n/en/docusaurus-plugin-content-docs/current/commands/browser/$.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
---
slug: _dollar
sidebar_position: 1
---

import Admonition from "@theme/Admonition";

# $

## Overview {#overview}

Use the `$` command instead of [findElement][find-element] as a shorter command to get a single element on the page.

The `$` command returns an object describing the element, on which you can call action commands without passing the selector. However, if you pass a selector, it will first find the corresponding element and then call the action for that element. You can also pass an object as the selector, where the object contains the property `element-6066-11e4-a52e-4f735466cecf` with the value of the element reference. The command will then convert the reference into an extended WebdriverIO element.

You can chain `$` or `$$` together to traverse down the DOM tree.

<Admonition type="info">
Read more about how to select specific elements in the recipe "[How to use
selectors][how-to-use-selectors]".
</Admonition>

## Usage {#usage}

```javascript
await browser.$(selector);
```

## Command Parameters {#parameters}

<table>
<thead>
<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
</thead>
<tbody>
<tr><td>selector</td><td>String or Function or Matcher</td><td>Selector or JS function to get a specific element.</td></tr>

</tbody>
</table>

## Examples {#examples}

**index.html**

```html
<ul id="menu">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/">Developer Guide</a>
</li>
<li>
<a href="/">API</a>
</li>
<li>
<a href="/">Contribute</a>
</li>
</ul>
```

**$.js**

```javascript
it("should get text of a menu link", async ({ browser }) => {
const text = await browser.$("#menu");

console.log(await text.$$("li")[2].$("a").getText()); // outputs: "API"
});

it("should get text of a menu link - JS Function", async ({ browser }) => {
const text = await browser.$(function () {
// Arrow function cannot be used here.
// This is Window – https://developer.mozilla.org/en-US/docs/Web/API/Window
//
// TypeScript users can do something like:
// return (this as Window).document.querySelector('#menu')
return this.document.querySelector("#menu"); // Element
});

console.log(await text.$$("li")[2].$("a").getText()); // outputs: "API"
});

it("should allow converting the protocol result of an element into a WebdriverIO element", async ({
browser,
}) => {
const activeElement = await browser.getActiveElement();

console.log(await browser.$(activeElement).getTagName()); // outputs the active element
});

it("should use Androids DataMatcher or ViewMatcher selector", async ({ browser }) => {
const menuItem = await browser.$({
name: "hasEntry",
args: ["title", "ViewTitle"],
class: "androidx.test.espresso.matcher.ViewMatchers",
});
await menuItem.click();

const menuItem = await browser.$({
name: "hasEntry",
args: ["title", "ViewTitle"],
});
await menuItem.click();
});
```

## Related Commands {#related}

- [browser.$$](../_dollardollar)
- [element.$](../../element/_dollar)
- [element.$$](../../element/_dollardollar)

[find-element]: https://webdriver.io/docs/api/webdriver/#findelement
[how-to-use-selectors]: https://webdriver.io/docs/selectors
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
import Admonition from "@theme/Admonition";

# action

## Overview {#overview}

Use the `action` command to perform input actions on one of the virtualizable devices in the web browser.

Unlike high-level commands like [scrollIntoView][scrollIntoView] and [doubleClick][doubleClick], the Actions API provides more granular control of input devices. The following input sources are available:

- text input for keyboard devices;
- control of mouse, pen, or touch device;
- scroll control for devices with a scroll wheel.

Each chain of `action` commands must end with a `perform` command to execute the specified set of actions. This also releases all pressed keys, buttons, etc., on virtual input devices and triggers the necessary events. The release can be skipped by passing the argument `true` to the `perform` command. Example:

```typescript
await browser.action(...).perform(true);
```

<Admonition type="info">
Support for this command and specific actions may vary depending on the execution environment.
The development progress can be tracked on [wpt.fyi][web-platform-tests]. For mobile devices,
you can use specialized gesture commands with [Appium][appium] on [iOS][appium-ios] and
[Android][appium-android].
</Admonition>

## Keyboard Control {#keyboard_control}

Used when specifying `key` as the argument for the `action` command. Example:

```typescript
await browser.action("key");
```

Returns a `KeyAction` object that supports the following actions:

- `down(value: string)` — creates a key press action;
- `up(value: string)` — creates a key release action;
- `pause(ms: number)` — specifies that the input source does nothing for the specified amount of time.

### Special Symbols {#special_symbols}

To use special symbols (`Control`, `Page Up`, `Shift`, etc.), you can use the `Key` object from the [webdriverio][webdriverio-npm] package. It contains Unicode representations of all necessary special symbols. Example:

```typescript
import { Key } from "webdriverio";

await browser.action("key").down(Key.Ctrl).perform();
```

### Usage Examples {#keyboard_examples}

```typescript
import { Key } from "webdriverio";

it("should emit key events using key action commands", async ({ browser }) => {
const elem = await browser.$("input");
await elem.click(); // make the element active

await browser.action("key").down("f").down("o").down("o").up("f").up("o").up("o").perform();

console.log(await elem.getValue()); // returns "foo"

// copy value from input element
await browser.action("key").down(Key.Ctrl).down("c").pause(10).up(Key.Ctrl).up("c").perform();
});
```

Instead of a series of `down/up` events, it is better to use the `setValue` command. The example is purely for demonstrating the principles of the `action` command.

## Pointer Control {#pointer_control}

Used when specifying `pointer` as the argument for the `action` command, and you can also specify the pointer type. Example:

```typescript
await browser.action("pointer", {
parameters: { pointerType: "mouse" }, // "mouse" is the default value, also available: "pen" or "touch"
});
```

Returns a `PointerAction` object that supports the following actions:

- `down(button: 'left' | 'middle' | 'right')` — creates an action to press a key;
- `down(params: PointerActionParams)` — creates an action to press a key with detailed parameters;
- `move(x: number, y: number)` — creates an action to move the pointer by `x` and `y` pixels relative to the viewport;
- `move(params: PointerActionMoveParams)` — creates an action to move the pointer by `x` and `y` pixels from the specified origin. The origin can be defined as the current pointer position, the viewport, or the center of a specific element;
- `up(button: 'left' | 'middle' | 'right')` — creates an action to release a key;
- `up(params: PointerActionUpParams)` — creates an action to release a key with detailed parameters;
- `cancel()` — creates an action that cancels the current pointer position;
- `pause(ms: number)` — specifies that the input source does nothing for the specified amount of time.

Detailed information on the parameter types [PointerActionParams][pointer-action-params], [PointerActionMoveParams][pointer-action-move-params], and [PointerActionUpParams][pointer-action-up-params] can be found in the webdriverio source code.

### Usage Examples {#pointer_examples}

```typescript
it("drag and drop using pointer action command", async ({ browser }) => {
const origin = await browser.$("#source");
const targetOrigin = await browser.$("#target");

await browser
.action("pointer")
.move({ duration: 0, origin, x: 0, y: 0 })
.down({ button: 0 }) // left button
.pause(10)
.move({ duration: 0, origin: targetOrigin })
.up({ button: 0 })
.perform();
});
```

## Scroll Wheel Control {#scroll_wheel_control}

Used when specifying `wheel` as the argument for the `action` command. Example:

```typescript
await browser.action("wheel");
```

Returns a `WheelAction` object that supports the following actions:

- `scroll(params: ScrollParams)` — scrolls the page to the specified coordinates or origin;
- `pause(ms: number)` — specifies that the input source does nothing for the specified amount of time.

Detailed information on the parameter type [ScrollParams][scroll-params] can be found in the webdriverio source code.

### Usage Examples {#scroll_examples}

```typescript
it("should scroll using wheel action commands", async ({ browser }) => {
console.log(await browser.execute(() => window.scrollY)); // returns 0

await browser
.action("wheel")
.scroll({
deltaX: 0,
deltaY: 500,
duration: 200,
})
.perform();

console.log(await browser.execute(() => window.scrollY)); // returns 500
});
```

## Related Commands {#related}

- [actions](../actions)

[scrollIntoView]: ../../element/scrollIntoView
[doubleClick]: ../../element/doubleClick
[web-platform-tests]: https://wpt.fyi/results/webdriver/tests/perform_actions?label=experimental&label=master&aligned
[appium]: http://appium.io
[appium-ios]: https://appium.github.io/appium-xcuitest-driver/latest/reference/execute-methods/#mobile-pinch
[appium-android]: https://github.com/appium/appium-uiautomator2-driver#mobile-gesture-commands
[webdriverio-npm]: https://www.npmjs.com/package/webdriverio
[pointer-action-params]: https://github.com/webdriverio/webdriverio/blob/8ca026c75bf7c27ef9d574f0ec48d8bc13658602/packages/webdriverio/src/utils/actions/pointer.ts#L20-L35
[pointer-action-move-params]: https://github.com/webdriverio/webdriverio/blob/8ca026c75bf7c27ef9d574f0ec48d8bc13658602/packages/webdriverio/src/utils/actions/pointer.ts#L20-L42
[pointer-action-up-params]: https://github.com/webdriverio/webdriverio/blob/8ca026c75bf7c27ef9d574f0ec48d8bc13658602/packages/webdriverio/src/utils/actions/pointer.ts#L13-L19
[scroll-params]: https://github.com/webdriverio/webdriverio/blob/8ca026c75bf7c27ef9d574f0ec48d8bc13658602/packages/webdriverio/src/utils/actions/wheel.ts#L4-L29
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
# actions

## Overview {#overview}

Use the `actions` command to perform multiple input actions on one of the virtualizable devices in the web browser, for example, to simulate page zooming. More detailed information is provided in the description of the [action][action] command.

## Usage {#usage}

```typescript
await browser.actions([action1, action2, ...]);
```

## Usage Examples {#examples}

```typescript
it("run multiple actions at once for a pinch zoom", async ({ browser }) => {
await browser.actions([
browser.action("pointer").move(500, 500).down().move(250, 250).up(),
browser.action("pointer").move(500, 500).down().move(750, 750).up(),
]);
});
```

## Related Commands {#related}

- [action](../action)

[action]: ../action
Loading
Loading