diff --git a/docs/src/selectors.md b/docs/src/selectors.md index d45dcdf5d8..50eb299360 100644 --- a/docs/src/selectors.md +++ b/docs/src/selectors.md @@ -179,40 +179,40 @@ methods accept [`param: selector`] as their first argument. await page.ClickAsync("xpath=//button"); ``` Learn more about [XPath selector][xpath]. -- React selector +- React selector (experimental) ```js - await page.click('react=ListItem[text *= "milk" i]'); + await page.click('_react=ListItem[text *= "milk" i]'); ``` ```java - page.click("react=ListItem[text *= 'milk' i]"); + page.click("_react=ListItem[text *= 'milk' i]"); ``` ```python async - await page.click("react=ListItem[text *= 'milk' i]") + await page.click("_react=ListItem[text *= 'milk' i]") ``` ```python sync - page.click("react=ListItem[text *= 'milk' i]") + page.click("_react=ListItem[text *= 'milk' i]") ``` ```csharp - await page.ClickAsync("react=ListItem[text *= 'milk' i]"); + await page.ClickAsync("_react=ListItem[text *= 'milk' i]"); ``` - Learn more about [React selector][react]. -- Vue selector + Learn more about [React selectors][react]. +- Vue selector (experimental) ```js - await page.click('vue=list-item[text *= "milk" i]'); + await page.click('_vue=list-item[text *= "milk" i]'); ``` ```java - page.click("vue=list-item[text *= 'milk' i]"); + page.click("_vue=list-item[text *= 'milk' i]"); ``` ```python async - await page.click("vue=list-item[text *= "milk" i]") + await page.click("_vue=list-item[text *= "milk" i]") ``` ```python sync - page.click("vue=list-item[text *= 'milk' i]") + page.click("_vue=list-item[text *= 'milk' i]") ``` ```csharp - await page.ClickAsync("vue=list-item[text *= 'milk' i]"); + await page.ClickAsync("_vue=list-item[text *= 'milk' i]"); ``` - Learn more about [Vue selector][vue]. + Learn more about [Vue selectors][vue]. @@ -663,22 +663,26 @@ converts `'//html/body'` to `'xpath=//html/body'`. ## React selectors +:::note +React selectors are experimental and prefixed with `_`. The functionality might change in future. +::: + React selectors allow selecting elements by its component name and property values. The syntax is very similar to [attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) and supports all attribute selector operators. In react selectors, component names are transcribed with **CamelCase**. Selector examples: -- match by **component**: `react=BookItem` -- match by component and **exact property value**, case-sensetive: `react=BookItem[author = "Steven King"]` -- match by property value only, **case-insensetive**: `react=[author = "steven king" i]` -- match by component and **truthy property value**: `react=MyButton[enabled]` -- match by component and **boolean value**: `react=MyButton[enabled = false]` -- match by property **value substring**: `react=[author *= "King"]` -- match by component and **multiple properties**: `react=BookItem[author *= "king" i][year = 1990]` -- match by **nested** property value: `react=[some.nested.value = 12]` -- match by component and property value **prefix**: `react=BookItem[author ^= "Steven"]` -- match by component and property value **suffix**: `react=BookItem[author $= "Steven"]` +- match by **component**: `_react=BookItem` +- match by component and **exact property value**, case-sensetive: `_react=BookItem[author = "Steven King"]` +- match by property value only, **case-insensetive**: `_react=[author = "steven king" i]` +- match by component and **truthy property value**: `_react=MyButton[enabled]` +- match by component and **boolean value**: `_react=MyButton[enabled = false]` +- match by property **value substring**: `_react=[author *= "King"]` +- match by component and **multiple properties**: `_react=BookItem[author *= "king" i][year = 1990]` +- match by **nested** property value: `_react=[some.nested.value = 12]` +- match by component and property value **prefix**: `_react=BookItem[author ^= "Steven"]` +- match by component and property value **suffix**: `_react=BookItem[author $= "Steven"]` @@ -695,22 +699,26 @@ React selectors, as well as [React DevTools](https://chrome.google.com/webstore/ ## Vue selectors +:::note +Vue selectors are experimental and prefixed with `_`. The functionality might change in future. +::: + Vue selectors allow selecting elements by its component name and property values. The syntax is very similar to [attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) and supports all attribute selector operators. In vue selectors, component names are transcribed with **kebab-case**. Selector examples: -- match by **component**: `vue=book-item` -- match by component and **exact property value**, case-sensetive: `vue=book-item[author = "Steven King"]` -- match by property value only, **case-insensetive**: `vue=[author = "steven king" i]` -- match by component and **truthy property value**: `vue=my-button[enabled]` -- match by component and **boolean value**: `vue=my-button[enabled = false]` -- match by property **value substring**: `vue=[author *= "King"]` -- match by component and **multiple properties**: `vue=book-item[author *= "king" i][year = 1990]` -- match by **nested** property value: `vue=[some.nested.value = 12]` -- match by component and property value **prefix**: `vue=book-item[author ^= "Steven"]` -- match by component and property value **suffix**: `vue=book-item[author $= "Steven"]` +- match by **component**: `_vue=book-item` +- match by component and **exact property value**, case-sensetive: `_vue=book-item[author = "Steven King"]` +- match by property value only, **case-insensetive**: `_vue=[author = "steven king" i]` +- match by component and **truthy property value**: `_vue=my-button[enabled]` +- match by component and **boolean value**: `_vue=my-button[enabled = false]` +- match by property **value substring**: `_vue=[author *= "King"]` +- match by component and **multiple properties**: `_vue=book-item[author *= "king" i][year = 1990]` +- match by **nested** property value: `_vue=[some.nested.value = 12]` +- match by component and property value **prefix**: `_vue=book-item[author ^= "Steven"]` +- match by component and property value **suffix**: `_vue=book-item[author $= "Steven"]` To find Vue element names in a tree use [Vue DevTools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en). diff --git a/src/server/injected/injectedScript.ts b/src/server/injected/injectedScript.ts index 587e43150b..53ec8e6f4d 100644 --- a/src/server/injected/injectedScript.ts +++ b/src/server/injected/injectedScript.ts @@ -64,8 +64,8 @@ export class InjectedScript { this._engines = new Map(); this._engines.set('xpath', XPathEngine); this._engines.set('xpath:light', XPathEngine); - this._engines.set('react', ReactEngine); - this._engines.set('vue', VueEngine); + this._engines.set('_react', ReactEngine); + this._engines.set('_vue', VueEngine); this._engines.set('text', this._createTextEngine(true)); this._engines.set('text:light', this._createTextEngine(false)); this._engines.set('id', this._createAttributeEngine('id', true)); diff --git a/src/server/selectors.ts b/src/server/selectors.ts index d3f7519866..5ff5a50296 100644 --- a/src/server/selectors.ts +++ b/src/server/selectors.ts @@ -39,7 +39,7 @@ export class Selectors { this._builtinEngines = new Set([ 'css', 'css:light', 'xpath', 'xpath:light', - 'react', 'vue', + '_react', '_vue', 'text', 'text:light', 'id', 'id:light', 'data-testid', 'data-testid:light', @@ -48,7 +48,7 @@ export class Selectors { '_visible', '_nth' ]); this._builtinEnginesInMainWorld = new Set([ - 'react', 'vue', + '_react', '_vue', ]); this._engines = new Map(); } diff --git a/tests/page/selectors-react.spec.ts b/tests/page/selectors-react.spec.ts index 268c0662de..56fe5202ca 100644 --- a/tests/page/selectors-react.spec.ts +++ b/tests/page/selectors-react.spec.ts @@ -30,79 +30,79 @@ for (const [name, url] of Object.entries(reacts)) { }); it('should work with single-root elements', async ({page}) => { - expect(await page.$$eval(`react=BookList`, els => els.length)).toBe(1); - expect(await page.$$eval(`react=BookItem`, els => els.length)).toBe(3); - expect(await page.$$eval(`react=BookList >> react=BookItem`, els => els.length)).toBe(3); - expect(await page.$$eval(`react=BookItem >> react=BookList`, els => els.length)).toBe(0); + expect(await page.$$eval(`_react=BookList`, els => els.length)).toBe(1); + expect(await page.$$eval(`_react=BookItem`, els => els.length)).toBe(3); + expect(await page.$$eval(`_react=BookList >> _react=BookItem`, els => els.length)).toBe(3); + expect(await page.$$eval(`_react=BookItem >> _react=BookList`, els => els.length)).toBe(0); }); it('should work with multi-root elements (fragments)', async ({page}) => { it.skip(name === 'react15', 'React 15 does not support fragments'); - expect(await page.$$eval(`react=App`, els => els.length)).toBe(14); - expect(await page.$$eval(`react=AppHeader`, els => els.length)).toBe(2); - expect(await page.$$eval(`react=NewBook`, els => els.length)).toBe(2); + expect(await page.$$eval(`_react=App`, els => els.length)).toBe(14); + expect(await page.$$eval(`_react=AppHeader`, els => els.length)).toBe(2); + expect(await page.$$eval(`_react=NewBook`, els => els.length)).toBe(2); }); it('should not crash when there is no match', async ({page}) => { - expect(await page.$$eval(`react=Apps`, els => els.length)).toBe(0); - expect(await page.$$eval(`react=BookLi`, els => els.length)).toBe(0); + expect(await page.$$eval(`_react=Apps`, els => els.length)).toBe(0); + expect(await page.$$eval(`_react=BookLi`, els => els.length)).toBe(0); }); it('should compose', async ({page}) => { - expect(await page.$eval(`react=NewBook >> react=button`, el => el.textContent)).toBe('new book'); - expect(await page.$eval(`react=NewBook >> react=input`, el => el.tagName)).toBe('INPUT'); - expect(await page.$eval(`react=BookItem >> text=Gatsby`, el => el.textContent)).toBe('The Great Gatsby'); + expect(await page.$eval(`_react=NewBook >> _react=button`, el => el.textContent)).toBe('new book'); + expect(await page.$eval(`_react=NewBook >> _react=input`, el => el.tagName)).toBe('INPUT'); + expect(await page.$eval(`_react=BookItem >> text=Gatsby`, el => el.textContent)).toBe('The Great Gatsby'); }); it('should query by props combinations', async ({page}) => { - expect(await page.$$eval(`react=BookItem[name="The Great Gatsby"]`, els => els.length)).toBe(1); - expect(await page.$$eval(`react=BookItem[name="the great gatsby" i]`, els => els.length)).toBe(1); - expect(await page.$$eval(`react=ColorButton[nested.index = 0]`, els => els.length)).toBe(1); - expect(await page.$$eval(`react=ColorButton[nested.nonexisting.index = 0]`, els => els.length)).toBe(0); - expect(await page.$$eval(`react=ColorButton[nested.index.nonexisting = 0]`, els => els.length)).toBe(0); - expect(await page.$$eval(`react=ColorButton[nested.index.nonexisting = 1]`, els => els.length)).toBe(0); - expect(await page.$$eval(`react=ColorButton[nested.value = 4.1]`, els => els.length)).toBe(1); - expect(await page.$$eval(`react=ColorButton[enabled = false]`, els => els.length)).toBe(4); - expect(await page.$$eval(`react=ColorButton[enabled = true] `, els => els.length)).toBe(5); - expect(await page.$$eval(`react=ColorButton[enabled = true][color = "red"]`, els => els.length)).toBe(2); - expect(await page.$$eval(`react=ColorButton[enabled = true][color = "red"i][nested.index = 6]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_react=BookItem[name="The Great Gatsby"]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_react=BookItem[name="the great gatsby" i]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_react=ColorButton[nested.index = 0]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_react=ColorButton[nested.nonexisting.index = 0]`, els => els.length)).toBe(0); + expect(await page.$$eval(`_react=ColorButton[nested.index.nonexisting = 0]`, els => els.length)).toBe(0); + expect(await page.$$eval(`_react=ColorButton[nested.index.nonexisting = 1]`, els => els.length)).toBe(0); + expect(await page.$$eval(`_react=ColorButton[nested.value = 4.1]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_react=ColorButton[enabled = false]`, els => els.length)).toBe(4); + expect(await page.$$eval(`_react=ColorButton[enabled = true] `, els => els.length)).toBe(5); + expect(await page.$$eval(`_react=ColorButton[enabled = true][color = "red"]`, els => els.length)).toBe(2); + expect(await page.$$eval(`_react=ColorButton[enabled = true][color = "red"i][nested.index = 6]`, els => els.length)).toBe(1); }); it('should exact match by props', async ({page}) => { - expect(await page.$eval(`react=BookItem[name = "The Great Gatsby"]`, el => el.textContent)).toBe('The Great Gatsby'); - expect(await page.$$eval(`react=BookItem[name = "The Great Gatsby"]`, els => els.length)).toBe(1); + expect(await page.$eval(`_react=BookItem[name = "The Great Gatsby"]`, el => el.textContent)).toBe('The Great Gatsby'); + expect(await page.$$eval(`_react=BookItem[name = "The Great Gatsby"]`, els => els.length)).toBe(1); // case sensetive by default - expect(await page.$$eval(`react=BookItem[name = "the great gatsby"]`, els => els.length)).toBe(0); - expect(await page.$$eval(`react=BookItem[name = "the great gatsby" s]`, els => els.length)).toBe(0); - expect(await page.$$eval(`react=BookItem[name = "the great gatsby" S]`, els => els.length)).toBe(0); + expect(await page.$$eval(`_react=BookItem[name = "the great gatsby"]`, els => els.length)).toBe(0); + expect(await page.$$eval(`_react=BookItem[name = "the great gatsby" s]`, els => els.length)).toBe(0); + expect(await page.$$eval(`_react=BookItem[name = "the great gatsby" S]`, els => els.length)).toBe(0); // case insensetive with flag - expect(await page.$$eval(`react=BookItem[name = "the great gatsby" i]`, els => els.length)).toBe(1); - expect(await page.$$eval(`react=BookItem[name = "the great gatsby" I]`, els => els.length)).toBe(1); - expect(await page.$$eval(`react=BookItem[name = " The Great Gatsby "]`, els => els.length)).toBe(0); + expect(await page.$$eval(`_react=BookItem[name = "the great gatsby" i]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_react=BookItem[name = "the great gatsby" I]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_react=BookItem[name = " The Great Gatsby "]`, els => els.length)).toBe(0); }); it('should partially match by props', async ({page}) => { // Check partial matching - expect(await page.$eval(`react=BookItem[name *= "Gatsby"]`, el => el.textContent)).toBe('The Great Gatsby'); - expect(await page.$$eval(`react=BookItem[name *= "Gatsby"]`, els => els.length)).toBe(1); - expect(await page.$$eval(`react=[name *= "Gatsby"]`, els => els.length)).toBe(1); + expect(await page.$eval(`_react=BookItem[name *= "Gatsby"]`, el => el.textContent)).toBe('The Great Gatsby'); + expect(await page.$$eval(`_react=BookItem[name *= "Gatsby"]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_react=[name *= "Gatsby"]`, els => els.length)).toBe(1); - expect(await page.$$eval(`react=BookItem[name = "Gatsby"]`, els => els.length)).toBe(0); + expect(await page.$$eval(`_react=BookItem[name = "Gatsby"]`, els => els.length)).toBe(0); }); it('should support all string operators', async ({page}) => { - expect(await page.$$eval(`react=ColorButton[color = "red"]`, els => els.length)).toBe(3); - expect(await page.$$eval(`react=ColorButton[color |= "red"]`, els => els.length)).toBe(3); - expect(await page.$$eval(`react=ColorButton[color $= "ed"]`, els => els.length)).toBe(3); - expect(await page.$$eval(`react=ColorButton[color ^= "gr"]`, els => els.length)).toBe(3); - expect(await page.$$eval(`react=ColorButton[color ~= "e"]`, els => els.length)).toBe(0); - expect(await page.$$eval(`react=BookItem[name ~= "gatsby" i]`, els => els.length)).toBe(1); - expect(await page.$$eval(`react=BookItem[name *= " gatsby" i]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_react=ColorButton[color = "red"]`, els => els.length)).toBe(3); + expect(await page.$$eval(`_react=ColorButton[color |= "red"]`, els => els.length)).toBe(3); + expect(await page.$$eval(`_react=ColorButton[color $= "ed"]`, els => els.length)).toBe(3); + expect(await page.$$eval(`_react=ColorButton[color ^= "gr"]`, els => els.length)).toBe(3); + expect(await page.$$eval(`_react=ColorButton[color ~= "e"]`, els => els.length)).toBe(0); + expect(await page.$$eval(`_react=BookItem[name ~= "gatsby" i]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_react=BookItem[name *= " gatsby" i]`, els => els.length)).toBe(1); }); it('should support truthy querying', async ({page}) => { - expect(await page.$$eval(`react=ColorButton[enabled]`, els => els.length)).toBe(5); + expect(await page.$$eval(`_react=ColorButton[enabled]`, els => els.length)).toBe(5); }); }); } diff --git a/tests/page/selectors-vue.spec.ts b/tests/page/selectors-vue.spec.ts index 45cc6d6bd6..25ab29d882 100644 --- a/tests/page/selectors-vue.spec.ts +++ b/tests/page/selectors-vue.spec.ts @@ -29,77 +29,77 @@ for (const [name, url] of Object.entries(vues)) { }); it('should work with single-root elements', async ({page}) => { - expect(await page.$$eval(`vue=book-list`, els => els.length)).toBe(1); - expect(await page.$$eval(`vue=book-item`, els => els.length)).toBe(3); - expect(await page.$$eval(`vue=book-list >> vue=book-item`, els => els.length)).toBe(3); - expect(await page.$$eval(`vue=book-item >> vue=book-list`, els => els.length)).toBe(0); + expect(await page.$$eval(`_vue=book-list`, els => els.length)).toBe(1); + expect(await page.$$eval(`_vue=book-item`, els => els.length)).toBe(3); + expect(await page.$$eval(`_vue=book-list >> _vue=book-item`, els => els.length)).toBe(3); + expect(await page.$$eval(`_vue=book-item >> _vue=book-list`, els => els.length)).toBe(0); }); it('should work with multi-root elements (fragments)', async ({page}) => { it.skip(name === 'vue2', 'vue2 does not support fragments'); - expect(await page.$$eval(`vue=Root`, els => els.length)).toBe(14); - expect(await page.$$eval(`vue=app-header`, els => els.length)).toBe(2); - expect(await page.$$eval(`vue=new-book`, els => els.length)).toBe(2); + expect(await page.$$eval(`_vue=Root`, els => els.length)).toBe(14); + expect(await page.$$eval(`_vue=app-header`, els => els.length)).toBe(2); + expect(await page.$$eval(`_vue=new-book`, els => els.length)).toBe(2); }); it('should not crash when there is no match', async ({page}) => { - expect(await page.$$eval(`vue=apps`, els => els.length)).toBe(0); - expect(await page.$$eval(`vue=book-li`, els => els.length)).toBe(0); + expect(await page.$$eval(`_vue=apps`, els => els.length)).toBe(0); + expect(await page.$$eval(`_vue=book-li`, els => els.length)).toBe(0); }); it('should compose', async ({page}) => { - expect(await page.$eval(`vue=book-item >> text=Gatsby`, el => el.textContent.trim())).toBe('The Great Gatsby'); + expect(await page.$eval(`_vue=book-item >> text=Gatsby`, el => el.textContent.trim())).toBe('The Great Gatsby'); }); it('should query by props combinations', async ({page}) => { - expect(await page.$$eval(`vue=book-item[name="The Great Gatsby"]`, els => els.length)).toBe(1); - expect(await page.$$eval(`vue=book-item[name="the great gatsby" i]`, els => els.length)).toBe(1); - expect(await page.$$eval(`vue=color-button[nested.index = 0]`, els => els.length)).toBe(1); - expect(await page.$$eval(`vue=color-button[nested.nonexisting.index = 0]`, els => els.length)).toBe(0); - expect(await page.$$eval(`vue=color-button[nested.index.nonexisting = 0]`, els => els.length)).toBe(0); - expect(await page.$$eval(`vue=color-button[nested.index.nonexisting = 1]`, els => els.length)).toBe(0); - expect(await page.$$eval(`vue=color-button[nested.value = 4.1]`, els => els.length)).toBe(1); - expect(await page.$$eval(`vue=color-button[enabled = false]`, els => els.length)).toBe(4); - expect(await page.$$eval(`vue=color-button[enabled = true] `, els => els.length)).toBe(5); - expect(await page.$$eval(`vue=color-button[enabled = true][color = "red"]`, els => els.length)).toBe(2); - expect(await page.$$eval(`vue=color-button[enabled = true][color = "red"i][nested.index = 6]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_vue=book-item[name="The Great Gatsby"]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_vue=book-item[name="the great gatsby" i]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_vue=color-button[nested.index = 0]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_vue=color-button[nested.nonexisting.index = 0]`, els => els.length)).toBe(0); + expect(await page.$$eval(`_vue=color-button[nested.index.nonexisting = 0]`, els => els.length)).toBe(0); + expect(await page.$$eval(`_vue=color-button[nested.index.nonexisting = 1]`, els => els.length)).toBe(0); + expect(await page.$$eval(`_vue=color-button[nested.value = 4.1]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_vue=color-button[enabled = false]`, els => els.length)).toBe(4); + expect(await page.$$eval(`_vue=color-button[enabled = true] `, els => els.length)).toBe(5); + expect(await page.$$eval(`_vue=color-button[enabled = true][color = "red"]`, els => els.length)).toBe(2); + expect(await page.$$eval(`_vue=color-button[enabled = true][color = "red"i][nested.index = 6]`, els => els.length)).toBe(1); }); it('should exact match by props', async ({page}) => { - expect(await page.$eval(`vue=book-item[name = "The Great Gatsby"]`, el => el.textContent)).toBe('The Great Gatsby'); - expect(await page.$$eval(`vue=book-item[name = "The Great Gatsby"]`, els => els.length)).toBe(1); + expect(await page.$eval(`_vue=book-item[name = "The Great Gatsby"]`, el => el.textContent)).toBe('The Great Gatsby'); + expect(await page.$$eval(`_vue=book-item[name = "The Great Gatsby"]`, els => els.length)).toBe(1); // case sensetive by default - expect(await page.$$eval(`vue=book-item[name = "the great gatsby"]`, els => els.length)).toBe(0); - expect(await page.$$eval(`vue=book-item[name = "the great gatsby" s]`, els => els.length)).toBe(0); - expect(await page.$$eval(`vue=book-item[name = "the great gatsby" S]`, els => els.length)).toBe(0); + expect(await page.$$eval(`_vue=book-item[name = "the great gatsby"]`, els => els.length)).toBe(0); + expect(await page.$$eval(`_vue=book-item[name = "the great gatsby" s]`, els => els.length)).toBe(0); + expect(await page.$$eval(`_vue=book-item[name = "the great gatsby" S]`, els => els.length)).toBe(0); // case insensetive with flag - expect(await page.$$eval(`vue=book-item[name = "the great gatsby" i]`, els => els.length)).toBe(1); - expect(await page.$$eval(`vue=book-item[name = "the great gatsby" I]`, els => els.length)).toBe(1); - expect(await page.$$eval(`vue=book-item[name = " The Great Gatsby "]`, els => els.length)).toBe(0); + expect(await page.$$eval(`_vue=book-item[name = "the great gatsby" i]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_vue=book-item[name = "the great gatsby" I]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_vue=book-item[name = " The Great Gatsby "]`, els => els.length)).toBe(0); }); it('should partially match by props', async ({page}) => { // Check partial matching - expect(await page.$eval(`vue=book-item[name *= "Gatsby"]`, el => el.textContent)).toBe('The Great Gatsby'); - expect(await page.$$eval(`vue=book-item[name *= "Gatsby"]`, els => els.length)).toBe(1); - expect(await page.$$eval(`vue=[name *= "Gatsby"]`, els => els.length)).toBe(1); + expect(await page.$eval(`_vue=book-item[name *= "Gatsby"]`, el => el.textContent)).toBe('The Great Gatsby'); + expect(await page.$$eval(`_vue=book-item[name *= "Gatsby"]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_vue=[name *= "Gatsby"]`, els => els.length)).toBe(1); - expect(await page.$$eval(`vue=book-item[name = "Gatsby"]`, els => els.length)).toBe(0); + expect(await page.$$eval(`_vue=book-item[name = "Gatsby"]`, els => els.length)).toBe(0); }); it('should support all string operators', async ({page}) => { - expect(await page.$$eval(`vue=color-button[color = "red"]`, els => els.length)).toBe(3); - expect(await page.$$eval(`vue=color-button[color |= "red"]`, els => els.length)).toBe(3); - expect(await page.$$eval(`vue=color-button[color $= "ed"]`, els => els.length)).toBe(3); - expect(await page.$$eval(`vue=color-button[color ^= "gr"]`, els => els.length)).toBe(3); - expect(await page.$$eval(`vue=color-button[color ~= "e"]`, els => els.length)).toBe(0); - expect(await page.$$eval(`vue=book-item[name ~= "gatsby" i]`, els => els.length)).toBe(1); - expect(await page.$$eval(`vue=book-item[name *= " gatsby" i]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_vue=color-button[color = "red"]`, els => els.length)).toBe(3); + expect(await page.$$eval(`_vue=color-button[color |= "red"]`, els => els.length)).toBe(3); + expect(await page.$$eval(`_vue=color-button[color $= "ed"]`, els => els.length)).toBe(3); + expect(await page.$$eval(`_vue=color-button[color ^= "gr"]`, els => els.length)).toBe(3); + expect(await page.$$eval(`_vue=color-button[color ~= "e"]`, els => els.length)).toBe(0); + expect(await page.$$eval(`_vue=book-item[name ~= "gatsby" i]`, els => els.length)).toBe(1); + expect(await page.$$eval(`_vue=book-item[name *= " gatsby" i]`, els => els.length)).toBe(1); }); it('should support truthy querying', async ({page}) => { - expect(await page.$$eval(`vue=color-button[enabled]`, els => els.length)).toBe(5); + expect(await page.$$eval(`_vue=color-button[enabled]`, els => els.length)).toBe(5); }); }); }