Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(selectors): temporarily remove zs engine #824

Merged
merged 1 commit into from
Feb 4, 2020
Merged

feat(selectors): temporarily remove zs engine #824

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
10 changes: 2 additions & 8 deletions docs/selectors.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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).
Expand Down
2 changes: 1 addition & 1 deletion src/dom.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
3 changes: 1 addition & 2 deletions src/selectors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -32,7 +31,7 @@ export class Selectors {
}

constructor() {
this._sources = [zsSelectorEngineSource.source];
this._sources = [];
}

async register(engineFunction: string | Function, ...args: any[]) {
Expand Down
46 changes: 25 additions & 21 deletions test/queryselector.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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}) => {
Expand Down Expand Up @@ -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}) => {
Expand All @@ -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');
});
});

Expand All @@ -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>');
Expand Down Expand Up @@ -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}) => {
Expand Down Expand Up @@ -249,16 +249,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');
Expand Down Expand Up @@ -355,6 +345,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>');
Expand Down Expand Up @@ -470,6 +464,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', () => {
Expand Down