Skip to content

Commit 6eae4aa

Browse files
Fix some wording issues in the selector docs (webdriverio#4939)
* fix some wording issues in the selector docs * add note to 'Partial Link Text' too
1 parent 5cceaa8 commit 6eae4aa

File tree

1 file changed

+27
-12
lines changed

1 file changed

+27
-12
lines changed

docs/Selectors.md

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ id: selectors
33
title: Selectors
44
---
55

6-
The JSON Wire Protocol provides several selector strategies to query an element. WebdriverIO simplifies them to keep selecting elements simple. The following selector types are supported:
6+
The [WebDriver Protocol](https://w3c.github.io/webdriver/) provides several selector strategies to query an element. WebdriverIO simplifies them to keep selecting elements simple. Please note that even though the command to query elements is called `$` and `$$`, they have nothing to do with jQuery or the [Sizzle Selector Engine](https://github.com/jquery/sizzle). The following selector types are supported:
77

88
## CSS Query Selector
99

@@ -32,7 +32,7 @@ console.log(link.getAttribute('href')) // outputs: "https://webdriver.io"
3232

3333
## Partial Link Text
3434

35-
To find a anchor element whose visible text partially matches your search value,
35+
To find a anchor element whose visible text partially matches your search value,
3636
query it by using `*=` in front of the query string (e.g. `*=driver`).
3737

3838
```html
@@ -46,9 +46,17 @@ const link = $('*=driver')
4646
console.log(link.getText()) // outputs: "WebdriverIO"
4747
```
4848

49+
__Note:__ You can't mix multiple selector stratgies in one selector. Use multiple chained element queries to reach the same goal, e.g.:
50+
51+
```js
52+
const elem = $('header h1*=Welcome') // doesn't work!!!
53+
// use instead
54+
const elem = $('header').$('*=driver')
55+
```
56+
4957
## Element with certain text
5058

51-
The same technique can be applied to elements as well.
59+
The same technique can be applied to elements as well.
5260

5361
For example, here's a query for a level 1 heading with the text "Welcome to my Page":
5462

@@ -93,6 +101,14 @@ const idAndPartialText = $('#elem*=WebdriverIO')
93101
console.log(idAndPartialText.getText()) // outputs: "WebdriverIO is the best"
94102
```
95103

104+
__Note:__ You can't mix multiple selector stratgies in one selector. Use multiple chained element queries to reach the same goal, e.g.:
105+
106+
```js
107+
const elem = $('header h1*=Welcome') // doesn't work!!!
108+
// use instead
109+
const elem = $('header').$('h1*=Welcome')
110+
```
111+
96112
## Tag Name
97113

98114
To query an element with a specific tag name, use `<tag>` or `<tag />`.
@@ -110,7 +126,7 @@ console.log(classNameAndText.getText()) // outputs: "WebdriverIO is the best"
110126

111127
## xPath
112128

113-
It is also possible to query elements via a specific [xPath](https://developer.mozilla.org/en-US/docs/Web/XPath).
129+
It is also possible to query elements via a specific [xPath](https://developer.mozilla.org/en-US/docs/Web/XPath).
114130

115131
An xPath selector has a format like `//body/div[6]/div[1]/span[1]`.
116132

@@ -138,14 +154,13 @@ console.log(parent.getTagName()) // outputs: "body"
138154
```
139155
## id
140156

141-
Finding element by id has no specific syntax in WebDriver and one should use either CSS selectors (`#<my element ID>`) or xPath (`//*[@id="<my element ID>"]`).
142-
157+
Finding element by id has no specific syntax in WebDriver and one should use either CSS selectors (`#<my element ID>`) or xPath (`//*[@id="<my element ID>"]`).
158+
143159
However some drivers (e.g. [Appium You.i Engine Driver](https://github.com/YOU-i-Labs/appium-youiengine-driver#selector-strategies)) might still [support](https://github.com/YOU-i-Labs/appium-youiengine-driver#selector-strategies) this selector.
144160

145161
## JS Function
146162

147-
You can also use Javascript functions to fetch elements using web native APIs.
148-
Of course, you can only do this inside a web context (e.g., `browser`, or web context in mobile).
163+
You can also use Javascript functions to fetch elements using web native APIs. Of course, you can only do this inside a web context (e.g., `browser`, or web context in mobile).
149164

150165
Given the following HTML structure:
151166

@@ -195,7 +210,7 @@ menuItem.click()
195210

196211
### iOS UIAutomation
197212

198-
When automating an iOS application, Apple’s [UI Automation framework](https://developer.apple.com/library/prerelease/tvos/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/UIAutomation.html) can be used to find elements.
213+
When automating an iOS application, Apple’s [UI Automation framework](https://developer.apple.com/library/prerelease/tvos/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/UIAutomation.html) can be used to find elements.
199214

200215
This JavaScript [API](https://developer.apple.com/library/ios/documentation/DeveloperTools/Reference/UIAutomationRef/index.html#//apple_ref/doc/uid/TP40009771) has methods to access to the view and everything on it.
201216

@@ -259,7 +274,7 @@ $('CYIPushButtonView').click()
259274
## Chain Selectors
260275

261276
If you want to be more specific in your query, you can chain selectors until you've found the right
262-
element. If you call `element` before your actual command, WebdriverIO starts the query from that element.
277+
element. If you call `element` before your actual command, WebdriverIO starts the query from that element.
263278

264279
For example, if you have a DOM structure like:
265280

@@ -293,7 +308,7 @@ $('.row .entry:nth-child(2)').$('button*=Add').click()
293308

294309
## React Selectors
295310

296-
WebdriverIO provides a way to select React components based on the component name. To do this, you have a choice of two commands: `react$` and `react$$`.
311+
WebdriverIO provides a way to select React components based on the component name. To do this, you have a choice of two commands: `react$` and `react$$`.
297312

298313
These commands allow you to select components off the [React VirtualDOM](https://reactjs.org/docs/faq-internals.html) and return either a single WebdriverIO Element or an array of elements (depending on which function is used).
299314

@@ -321,7 +336,7 @@ function App() {
321336
ReactDOM.render(<App />, document.querySelector('#root'))
322337
```
323338

324-
In the above code there is a simple `MyComponent` instance inside the application, which React is rendering inside a HTML element with `id="root"`.
339+
In the above code there is a simple `MyComponent` instance inside the application, which React is rendering inside a HTML element with `id="root"`.
325340

326341
With the `browser.react$` command, you can select an instance of `MyComponent`:
327342

0 commit comments

Comments
 (0)