microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2024-11-10 12:57:42 +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
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');

10
docs/selectors.md
View File

@ -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).

2
src/dom.ts
View File

@ -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);

3
src/selectors.ts
View File

@ -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[]) {

46
test/queryselector.spec.js
View File

@ -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('<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');
});
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('<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!');
});
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('<div>hello</div><div>beautiful</div><div>world!</div>');
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('<div>hello</div><div>beautiful</div><div>beautiful</div><div>world!</div>');
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('<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');
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>');
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('<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}) => {
await page.setContent('<html><body><div class="second"><div class="inner">B</div></div></body></html>');
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(`<div>yo</div><div>ya</div><div>ye</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" ~ "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', () => {