diff --git a/docs/api.md b/docs/api.md index 9e77934985..30704f8bcd 100644 --- a/docs/api.md +++ b/docs/api.md @@ -3776,8 +3776,8 @@ const handle = await page.$('css=div'); // queries '//html/body/div' xpath selector const handle = await page.$('xpath=//html/body/div'); -// queries '"foo"' zs selector -const handle = await page.$('zs="foo"'); +// queries '"foo"' text selector +const handle = await page.$('text="foo"'); // queries 'span' css selector inside the result of '//html/body/div' xpath selector const handle = await page.$('xpath=//html/body/div >> css=span'); diff --git a/docs/selectors.md b/docs/selectors.md index 5692d0b186..3c9fb3304b 100644 --- a/docs/selectors.md +++ b/docs/selectors.md @@ -36,8 +36,8 @@ const handle = await page.$('css=div'); // queries '//html/body/div' xpath selector const handle = await page.$('xpath=//html/body/div'); -// queries '"foo"' zs selector -const handle = await page.$('zs="foo"'); +// queries '"foo"' text selector +const handle = await page.$('text="foo"'); // queries 'span' css selector inside the result of '//html/body/div' xpath selector const handle = await page.$('xpath=//html/body/div >> css=span'); @@ -82,12 +82,6 @@ Text engine finds an element that contains a text node with passed text. Example Id engines are selecting based on the corresponding atrribute value. For example: `data-test-id=foo` is equivalent to `querySelector('*[data-test-id=foo]')`. -### zs - -ZSelector is an experimental engine that tries to make selectors survive future refactorings. Example: `zs=div ~ "Login"`. - -TODO: write more. - ## Custom selector engines Playwright supports custom selector engines, registered with [selectors.register(engineFunction[, ...args])](api.md#selectorsregisterenginefunction-args). diff --git a/src/dom.ts b/src/dom.ts index 5fafbd3730..9b66827aa2 100644 --- a/src/dom.ts +++ b/src/dom.ts @@ -78,7 +78,7 @@ export class FrameExecutionContext extends js.ExecutionContext { if (!this._injectedPromise) { const source = ` new (${injectedSource.source})([ - ${selectors._sources.join(',\n')}, + ${selectors._sources.join(',\n')} ]) `; this._injectedPromise = this.evaluateHandle(source); diff --git a/src/selectors.ts b/src/selectors.ts index aa9033098a..ac24016e58 100644 --- a/src/selectors.ts +++ b/src/selectors.ts @@ -14,7 +14,6 @@ * limitations under the License. */ -import * as zsSelectorEngineSource from './generated/zsSelectorEngineSource'; import * as dom from './dom'; import Injected from './injected/injected'; import { helper } from './helper'; @@ -32,7 +31,7 @@ export class Selectors { } constructor() { - this._sources = [zsSelectorEngineSource.source]; + this._sources = []; } async register(engineFunction: string | Function, ...args: any[]) { diff --git a/test/queryselector.spec.js b/test/queryselector.spec.js index 38a3de150c..e84105c380 100644 --- a/test/queryselector.spec.js +++ b/test/queryselector.spec.js @@ -15,6 +15,8 @@ * limitations under the License. */ +const zsSelectorEngineSource = require('../lib/generated/zsSelectorEngineSource'); + module.exports.describe = function({testRunner, expect, selectors, FFOX, CHROMIUM, WEBKIT}) { const {describe, xdescribe, fdescribe} = testRunner; const {it, fit, xit, dit} = testRunner; @@ -46,9 +48,9 @@ module.exports.describe = function({testRunner, expect, selectors, FFOX, CHROMIU const idAttribute = await page.$eval('data-test-id=foo', e => e.id); expect(idAttribute).toBe('testAttribute'); }); - it('should work with zs selector', async({page, server}) => { + it('should work with text selector', async({page, server}) => { await page.setContent('
43543
'); - const idAttribute = await page.$eval('zs="43543"', e => e.id); + const idAttribute = await page.$eval('text="43543"', e => e.id); expect(idAttribute).toBe('testAttribute'); }); it('should work with xpath selector', async({page, server}) => { @@ -94,7 +96,7 @@ module.exports.describe = function({testRunner, expect, selectors, FFOX, CHROMIU }); it('should support >> syntax with different engines', async({page, server}) => { await page.setContent('
hello
'); - const text = await page.$eval('xpath=/html/body/section >> css=div >> zs="hello"', (e, suffix) => e.textContent + suffix, ' world!'); + const text = await page.$eval('xpath=/html/body/section >> css=div >> text="hello"', (e, suffix) => e.textContent + suffix, ' world!'); expect(text).toBe('hello world!'); }); it('should support spaces with >> syntax', async({page, server}) => { @@ -114,8 +116,6 @@ module.exports.describe = function({testRunner, expect, selectors, FFOX, CHROMIU expect(text3).toBe('Hello from root1'); const text4 = await page.$eval('xpath=/html/body/section/div >> css=div >> css=span', e => e.textContent); expect(text4).toBe('Hello from root2'); - const text5 = await page.$eval('zs=section div >> css=div >> css=span', e => e.textContent); - expect(text5).toBe('Hello from root2'); }); }); @@ -125,10 +125,10 @@ module.exports.describe = function({testRunner, expect, selectors, FFOX, CHROMIU const divsCount = await page.$$eval('css=div', divs => divs.length); expect(divsCount).toBe(3); }); - it('should work with zs selector', async({page, server}) => { - await page.setContent('
hello
beautiful
world!
'); - const divsCount = await page.$$eval('zs=div', divs => divs.length); - expect(divsCount).toBe(3); + it('should work with text selector', async({page, server}) => { + await page.setContent('
hello
beautiful
beautiful
world!
'); + const divsCount = await page.$$eval('text="beautiful"', divs => divs.length); + expect(divsCount).toBe(2); }); it('should work with xpath selector', async({page, server}) => { await page.setContent('
hello
beautiful
world!
'); @@ -158,9 +158,9 @@ module.exports.describe = function({testRunner, expect, selectors, FFOX, CHROMIU const element = await page.$('css=section'); expect(element).toBeTruthy(); }); - it('should query existing element with zs selector', async({page, server}) => { + it('should query existing element with text selector', async({page, server}) => { await page.setContent('
test
'); - const element = await page.$('zs="test"'); + const element = await page.$('text="test"'); expect(element).toBeTruthy(); }); it('should query existing element with xpath selector', async({page, server}) => { @@ -254,16 +254,6 @@ module.exports.describe = function({testRunner, expect, selectors, FFOX, CHROMIU expect(content).toBe('A'); }); - it('should query existing element with zs selector', async({page, server}) => { - await page.goto(server.PREFIX + '/playground.html'); - await page.setContent('
A
'); - const html = await page.$('zs=html'); - const second = await html.$('zs=.second'); - const inner = await second.$('zs=.inner'); - const content = await page.evaluate(e => e.textContent, inner); - expect(content).toBe('A'); - }); - it('should return null for non-existing element', async({page, server}) => { await page.setContent('
B
'); const html = await page.$('html'); @@ -360,6 +350,10 @@ module.exports.describe = function({testRunner, expect, selectors, FFOX, CHROMIU }); describe('zselector', () => { + beforeAll(async () => { + await selectors.register(zsSelectorEngineSource.source); + }); + it('query', async ({page}) => { await page.setContent(`
yo
ya
ye
`); expect(await page.$eval(`zs="ya"`, e => e.outerHTML)).toBe('
ya
'); @@ -475,6 +469,16 @@ module.exports.describe = function({testRunner, expect, selectors, FFOX, CHROMIU expect(await page.$eval(`zs="ya"~"hey"~"unique"`, e => e.outerHTML).catch(e => e.message)).toBe('Error: failed to find element matching selector "zs="ya"~"hey"~"unique""'); expect(await page.$$eval(`zs="ya" ~ "hey" ~ "hello"`, es => es.map(e => e.outerHTML).join('\n'))).toBe('
hello
\n
hello
'); }); + + it('should query existing element with zs selector', async({page, server}) => { + await page.goto(server.PREFIX + '/playground.html'); + await page.setContent('
A
'); + const html = await page.$('zs=html'); + const second = await html.$('zs=.second'); + const inner = await second.$('zs=.inner'); + const content = await page.evaluate(e => e.textContent, inner); + expect(content).toBe('A'); + }); }); describe('text selector', () => {