Skip to content

Commit a93f786

Browse files
shadowusrshadowusr
authored
docs: add en versions of element commands (#18)
1 parent ef4f5be commit a93f786

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+2737
-0
lines changed

‎i18n/en/docusaurus-plugin-content-docs/current/commands/element/$$.mdx

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
---
2+
slug: _dollardollar
3+
sidebar_label: $$
4+
---
5+
6+
import Admonition from "@theme/Admonition";
7+
8+
# $$
9+
10+
## Overview {#overview}
11+
12+
Use the `$$` command instead of [findElements][find-elements] as a shorter command to get multiple elements on the page within the scope of an element. This command is similar to the [browser.$$()](../../browser/_dollardollar) command but differs in that the search for elements will be among the children of the current element.
13+
14+
<Admonition type="info">
15+
Read more about how to select specific elements in the recipe "[How to use
16+
selectors][how-to-use-selectors]".
17+
</Admonition>
18+
19+
## Usage {#usage}
20+
21+
```javascript
22+
await browser.$(selector).$$(subSelector);
23+
```
24+
25+
## Command Parameters {#parameters}
26+
27+
<table>
28+
<thead>
29+
<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
30+
</thead>
31+
<tbody>
32+
<tr><td>subSelector</td><td>String or Function or Matcher</td><td>Selector, JS function, or Matcher object to get multiple elements.</td></tr>
33+
34+
</tbody>
35+
</table>
36+
37+
## Usage Examples {#examples}
38+
39+
**index.html**
40+
41+
```html
42+
<ul id="menu">
43+
<li>
44+
<a href="/">Home</a>
45+
</li>
46+
<li>
47+
<a href="/">Developer Guide</a>
48+
</li>
49+
<li>
50+
<a href="/">API</a>
51+
</li>
52+
<li>
53+
<a href="/">Contribute</a>
54+
</li>
55+
</ul>
56+
```
57+
58+
**$$.js**
59+
60+
```javascript
61+
it("should get text of a menu link", async ({ browser }) => {
62+
const text = await browser.$("#menu");
63+
64+
console.log(await text.$$("li")[2].$("a").getText()); // outputs: "API"
65+
});
66+
67+
it("should get text of a menu link - JS Function", async ({ browser }) => {
68+
const text = await browser.$("#menu");
69+
70+
console.log(
71+
await text
72+
.$$(function () {
73+
// Arrow function cannot be used here.
74+
// This is Element – https://developer.mozilla.org/en-US/docs/Web/API/Element
75+
// in this specific example – this is HTMLUListElement
76+
//
77+
// TypeScript users can do something like:
78+
// return (this as Element).querySelector('li')
79+
return this.querySelectorAll("li"); // Element[]
80+
})[2]
81+
.$("a")
82+
.getText(),
83+
); // outputs: "API"
84+
});
85+
```
86+
87+
## Related Commands
88+
89+
- [element.$](../_dollar)
90+
- [browser.$](../../browser/_dollar)
91+
- [browser.$$](../../browser/_dollardollar)
92+
93+
## References
94+
95+
We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/$$), from which we drew some information while writing our version.
96+
97+
[find-elements]: https://webdriver.io/docs/api/webdriver/#findelements
98+
[how-to-use-selectors]: https://webdriver.io/docs/selectors

‎i18n/en/docusaurus-plugin-content-docs/current/commands/element/$.mdx

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
---
2+
slug: _dollar
3+
sidebar_position: 1
4+
---
5+
6+
import Admonition from "@theme/Admonition";
7+
8+
# $
9+
10+
## Overview {#overview}
11+
12+
Use the `$` command instead of [findElement][find-element] as a shorter command to get a single element on the page.
13+
14+
The `$` command returns an object describing the element, on 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 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 then converts the reference into an extended WebdriverIO element. Note: Use these element objects only if you are certain they exist on the page. This can be verified, for example, using the [isExisting](../isExisting) command.
15+
16+
You can chain `$` or `$$` together to navigate down the DOM tree. But note that chaining `$` and `$$` commands makes sense only when using multiple selector strategies. Otherwise, you will be making unnecessary requests that will slow down the test (e.g., `$('body').$('div')` creates two requests, whereas `$('body div')` does the same in one request).
17+
18+
<Admonition type="info">
19+
Read more about how to select specific elements in the recipe "[How to use
20+
selectors][how-to-use-selectors]".
21+
</Admonition>
22+
23+
## Usage {#usage}
24+
25+
```javascript
26+
await browser.$(selector);
27+
```
28+
29+
## Command Parameters {#parameters}
30+
31+
<table>
32+
<thead>
33+
<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
34+
</thead>
35+
<tbody>
36+
<tr><td>selector</td><td>String or Function or Matcher</td><td>Selector, JS function, or Matcher object to get a specific element.</td></tr>
37+
38+
</tbody>
39+
</table>
40+
41+
## Usage Examples {#examples}
42+
43+
**index.html**
44+
45+
```html
46+
<ul id="menu">
47+
<li>
48+
<a href="/">Home</a>
49+
</li>
50+
<li>
51+
<a href="/">Developer Guide</a>
52+
</li>
53+
<li>
54+
<a href="/">API</a>
55+
</li>
56+
<li>
57+
<a href="/">Contribute</a>
58+
</li>
59+
</ul>
60+
```
61+
62+
```javascript
63+
it("should get text of a menu link - JS Function", async ({ browser }) => {
64+
const text = await browser.$("#menu");
65+
66+
console.log(
67+
await text
68+
.$$("li")[2]
69+
.$(function () {
70+
// Arrow function cannot be used here.
71+
// This is Element – https://developer.mozilla.org/en-US/docs/Web/API/Element
72+
// in this specific example – this is HTMLLIElement
73+
//
74+
// TypeScript users can do something like:
75+
// return (this as Element).querySelector('a')
76+
return this.querySelector("a"); // Element
77+
})
78+
.getText(),
79+
); // outputs: "API"
80+
});
81+
82+
it("should get text of a menu link", async ({ browser }) => {
83+
const text = await browser.$("#menu");
84+
85+
console.log(await text.$$("li")[2].$("a").getText()); // outputs: "API"
86+
});
87+
88+
it("should allow to convert protocol result of an element into a WebdriverIO element", async ({
89+
browser,
90+
}) => {
91+
const activeElement = await browser.getActiveElement();
92+
93+
console.log(await browser.$(activeElement).getTagName()); // outputs the active element
94+
});
95+
96+
it("should use Android's DataMatcher or ViewMatcher selector", async ({ browser }) => {
97+
const menuItem = await browser.$({
98+
name: "hasEntry",
99+
args: ["title", "ViewTitle"],
100+
class: "androidx.test.espresso.matcher.ViewMatchers",
101+
});
102+
await menuItem.click();
103+
104+
const menuItem = await browser.$({
105+
name: "hasEntry",
106+
args: ["title", "ViewTitle"],
107+
});
108+
await menuItem.click();
109+
});
110+
```
111+
112+
## Related Commands {#related}
113+
114+
- [element.$$](../_dollardollar)
115+
- [browser.$](../../browser/_dollar)
116+
- [browser.$$](../../browser/_dollardollar)
117+
118+
## References
119+
120+
We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/$), from which we drew some information while writing our version.
121+
122+
[find-element]: https://webdriver.io/docs/api/webdriver/#findelement
123+
[how-to-use-selectors]: https://webdriver.io/docs/selectors

‎i18n/en/docusaurus-plugin-content-docs/current/commands/element/addValue.mdx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# addValue
2+
3+
## Overview {#overview}
4+
5+
Use the `addValue` command to add a value to an `<input>` or `<textarea>` element.
6+
7+
## Usage {#usage}
8+
9+
```javascript
10+
await browser.$(selector).addValue(value);
11+
```
12+
13+
## Command Parameters {#parameters}
14+
15+
<table>
16+
<thead>
17+
<tr><td>**Name**</td><td>**Type**</td><td>**Description**</td></tr>
18+
</thead>
19+
<tbody>
20+
<tr><td>value</td><td>String or Number</td><td>The value to add.</td></tr>
21+
22+
</tbody>
23+
</table>
24+
25+
## Usage Examples {#examples}
26+
27+
```javascript
28+
it("should demonstrate the addValue command", async ({ browser }) => {
29+
let input = await browser.$(".input");
30+
await input.addValue("test");
31+
await input.addValue(123);
32+
33+
value = await input.getValue();
34+
assert.equal(value, "test123"); // true
35+
});
36+
```
37+
38+
## Related Commands {#related}
39+
40+
- [element.clearValue](../clearValue)
41+
- [element.setValue](../setValue)
42+
- [browser.keys](../../browser/keys)
43+
44+
## References
45+
46+
We'd like to give credit to the original WebdriverIO docs [article](https://webdriver.io/docs/api/element/addValue), from which we drew some information while writing our version.

0 commit comments

Comments
 (0)