microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-01-07 03:39:48 +03:00
Code Issues Projects Releases Wiki Activity

feat(selectors): temporarily remove zs engine (#824)

Browse Source
This commit is contained in:
Pavel Feldman 2020-02-03 16:14:37 -08:00 committed by GitHub
parent 1059e22f9e
commit 05d4746eb5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 31 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/api.md
View File

@ -3776,8 +3776,8 @@ const handle = await page.$('css=div');
// queries '//html/body/div' xpath selector // queries '//html/body/div' xpath selector
const handle = await page.$('xpath=//html/body/div'); const handle = await page.$('xpath=//html/body/div');
// queries '"foo"' zs selector // queries '"foo"' text selector
const handle = await page.$('zs="foo"'); const handle = await page.$('text="foo"');
// queries 'span' css selector inside the result of '//html/body/div' xpath selector // queries 'span' css selector inside the result of '//html/body/div' xpath selector
const handle = await page.$('xpath=//html/body/div >> css=span'); const handle = await page.$('xpath=//html/body/div >> css=span');

10
docs/selectors.md
View File

@ -36,8 +36,8 @@ const handle = await page.$('css=div');
// queries '//html/body/div' xpath selector // queries '//html/body/div' xpath selector
const handle = await page.$('xpath=//html/body/div'); const handle = await page.$('xpath=//html/body/div');
// queries '"foo"' zs selector // queries '"foo"' text selector
const handle = await page.$('zs="foo"'); const handle = await page.$('text="foo"');
// queries 'span' css selector inside the result of '//html/body/div' xpath selector // queries 'span' css selector inside the result of '//html/body/div' xpath selector
const handle = await page.$('xpath=//html/body/div >> css=span'); 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]')`. 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 ## Custom selector engines
Playwright supports custom selector engines, registered with [selectors.register(engineFunction[, ...args])](api.md#selectorsregisterenginefunction-args). Playwright supports custom selector engines, registered with [selectors.register(engineFunction[, ...args])](api.md#selectorsregisterenginefunction-args).

2
src/dom.ts
View File

@ -78,7 +78,7 @@ export class FrameExecutionContext extends js.ExecutionContext {
if (!this._injectedPromise) { if (!this._injectedPromise) {
const source = ` const source = `
new (${injectedSource.source})([ new (${injectedSource.source})([
${selectors._sources.join(',\n')}, ${selectors._sources.join(',\n')}
]) ])
`; `;
this._injectedPromise = this.evaluateHandle(source); this._injectedPromise = this.evaluateHandle(source);

3
src/selectors.ts
View File

@ -14,7 +14,6 @@
* limitations under the License. * limitations under the License.
*/ */
import * as zsSelectorEngineSource from './generated/zsSelectorEngineSource';
import * as dom from './dom'; import * as dom from './dom';
import Injected from './injected/injected'; import Injected from './injected/injected';
import { helper } from './helper'; import { helper } from './helper';
@ -32,7 +31,7 @@ export class Selectors {
} }
constructor() { constructor() {
this._sources = [zsSelectorEngineSource.source]; this._sources = [];
} }
async register(engineFunction: string | Function, ...args: any[]) { async register(engineFunction: string | Function, ...args: any[]) {

46
test/queryselector.spec.js
View File

@ -15,6 +15,8 @@
* limitations under the License. * limitations under the License.
*/ */
const zsSelectorEngineSource = require('../lib/generated/zsSelectorEngineSource');
module.exports.describe = function({testRunner, expect, selectors, FFOX, CHROMIUM, WEBKIT}) { module.exports.describe = function({testRunner, expect, selectors, FFOX, CHROMIUM, WEBKIT}) {
const {describe, xdescribe, fdescribe} = testRunner; const {describe, xdescribe, fdescribe} = testRunner;
const {it, fit, xit, dit} = 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); const idAttribute = await page.$eval('data-test-id=foo', e => e.id);
expect(idAttribute).toBe('testAttribute'); 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('<section id="testAttribute">43543</section>'); await page.setContent('<section id="testAttribute">43543</section>');
const idAttribute = await page.$eval('zs="43543"', e => e.id); const idAttribute = await page.$eval('text="43543"', e => e.id);
expect(idAttribute).toBe('testAttribute'); expect(idAttribute).toBe('testAttribute');
}); });
it('should work with xpath selector', async({page, server}) => { 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}) => { it('should support >> syntax with different engines', async({page, server}) => {
await page.setContent('<section><div><span>hello</span></div></section>'); await page.setContent('<section><div><span>hello</span></div></section>');
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!'); expect(text).toBe('hello world!');
}); });
it('should support spaces with >> syntax', async({page, server}) => { 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'); expect(text3).toBe('Hello from root1');
const text4 = await page.$eval('xpath=/html/body/section/div >> css=div >> css=span', e => e.textContent); const text4 = await page.$eval('xpath=/html/body/section/div >> css=div >> css=span', e => e.textContent);
expect(text4).toBe('Hello from root2'); 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); const divsCount = await page.$$eval('css=div', divs => divs.length);
expect(divsCount).toBe(3); expect(divsCount).toBe(3);
}); });
it('should work with zs selector', async({page, server}) => { it('should work with text selector', async({page, server}) => {
await page.setContent('<div>hello</div><div>beautiful</div><div>world!</div>'); await page.setContent('<div>hello</div><div>beautiful</div><div>beautiful</div><div>world!</div>');
const divsCount = await page.$$eval('zs=div', divs => divs.length); const divsCount = await page.$$eval('text="beautiful"', divs => divs.length);
expect(divsCount).toBe(3); expect(divsCount).toBe(2);
}); });
it('should work with xpath selector', async({page, server}) => { it('should work with xpath selector', async({page, server}) => {
await page.setContent('<div>hello</div><div>beautiful</div><div>world!</div>'); await page.setContent('<div>hello</div><div>beautiful</div><div>world!</div>');
@ -158,9 +158,9 @@ module.exports.describe = function({testRunner, expect, selectors, FFOX, CHROMIU
const element = await page.$('css=section'); const element = await page.$('css=section');
expect(element).toBeTruthy(); 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('<section>test</section>'); await page.setContent('<section>test</section>');
const element = await page.$('zs="test"'); const element = await page.$('text="test"');
expect(element).toBeTruthy(); expect(element).toBeTruthy();
}); });
it('should query existing element with xpath selector', async({page, server}) => { 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'); 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('<html><body><div class="second"><div class="inner">A</div></div></body></html>');
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}) => { it('should return null for non-existing element', async({page, server}) => {
await page.setContent('<html><body><div class="second"><div class="inner">B</div></div></body></html>'); await page.setContent('<html><body><div class="second"><div class="inner">B</div></div></body></html>');
const html = await page.$('html'); const html = await page.$('html');
@ -360,6 +350,10 @@ module.exports.describe = function({testRunner, expect, selectors, FFOX, CHROMIU
}); });
describe('zselector', () => { describe('zselector', () => {
beforeAll(async () => {
await selectors.register(zsSelectorEngineSource.source);
});
it('query', async ({page}) => { it('query', async ({page}) => {
await page.setContent(`<div>yo</div><div>ya</div><div>ye</div>`); await page.setContent(`<div>yo</div><div>ya</div><div>ye</div>`);
expect(await page.$eval(`zs="ya"`, e => e.outerHTML)).toBe('<div>ya</div>'); expect(await page.$eval(`zs="ya"`, e => e.outerHTML)).toBe('<div>ya</div>');
@ -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"~"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('<div id="target">hello</div>\n<div id="target2">hello</div>'); expect(await page.$$eval(`zs="ya" ~ "hey" ~ "hello"`, es => es.map(e => e.outerHTML).join('\n'))).toBe('<div id="target">hello</div>\n<div id="target2">hello</div>');
}); });
it('should query existing element with zs selector', async({page, server}) => {
await page.goto(server.PREFIX + '/playground.html');
await page.setContent('<html><body><div class="second"><div class="inner">A</div></div></body></html>');
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', () => { describe('text selector', () => {