feat: change QueryHandler to contain QueryOne and QueryAll methods (#6218)

Co-authored-by: Mathias Bynens <mathias@qiwi.be>
This commit is contained in:
Johan Bay
2020-07-17 07:29:42 +02:00
committed by GitHub
parent 82645e85c7
commit 313774c553
4 changed files with 101 additions and 60 deletions

View File

@@ -293,10 +293,10 @@ describe('ElementHandle specs', function () {
await page.setContent('<div id="not-foo"></div><div id="foo"></div>');
// Register.
puppeteer.__experimental_registerCustomQueryHandler(
'getById',
(element, selector) => document.querySelector(`[id="${selector}"]`)
);
puppeteer.__experimental_registerCustomQueryHandler('getById', {
queryOne: (element, selector) =>
document.querySelector(`[id="${selector}"]`),
});
const element = await page.$('getById/foo');
expect(
await page.evaluate<(element: HTMLElement) => string>(
@@ -340,10 +340,10 @@ describe('ElementHandle specs', function () {
await page.setContent(
'<div id="not-foo"></div><div class="foo">Foo1</div><div class="foo baz">Foo2</div>'
);
puppeteer.__experimental_registerCustomQueryHandler(
'getByClass',
(element, selector) => document.querySelectorAll(`.${selector}`)
);
puppeteer.__experimental_registerCustomQueryHandler('getByClass', {
queryAll: (element, selector) =>
document.querySelectorAll(`.${selector}`),
});
const elements = await page.$$('getByClass/foo');
const classNames = await Promise.all(
elements.map(
@@ -362,10 +362,10 @@ describe('ElementHandle specs', function () {
await page.setContent(
'<div id="not-foo"></div><div class="foo">Foo1</div><div class="foo baz">Foo2</div>'
);
puppeteer.__experimental_registerCustomQueryHandler(
'getByClass',
(element, selector) => document.querySelectorAll(`.${selector}`)
);
puppeteer.__experimental_registerCustomQueryHandler('getByClass', {
queryAll: (element, selector) =>
document.querySelectorAll(`.${selector}`),
});
const elements = await page.$$eval(
'getByClass/foo',
(divs) => divs.length
@@ -375,10 +375,9 @@ describe('ElementHandle specs', function () {
});
it('should wait correctly with waitForSelector', async () => {
const { page, puppeteer } = getTestState();
puppeteer.__experimental_registerCustomQueryHandler(
'getByClass',
(element, selector) => element.querySelector(`.${selector}`)
);
puppeteer.__experimental_registerCustomQueryHandler('getByClass', {
queryOne: (element, selector) => element.querySelector(`.${selector}`),
});
const waitFor = page.waitForSelector('getByClass/foo');
// Set the page content after the waitFor has been started.
@@ -391,10 +390,9 @@ describe('ElementHandle specs', function () {
});
it('should wait correctly with waitFor', async () => {
const { page, puppeteer } = getTestState();
puppeteer.__experimental_registerCustomQueryHandler(
'getByClass',
(element, selector) => element.querySelector(`.${selector}`)
);
puppeteer.__experimental_registerCustomQueryHandler('getByClass', {
queryOne: (element, selector) => element.querySelector(`.${selector}`),
});
const waitFor = page.waitFor('getByClass/foo');
// Set the page content after the waitFor has been started.
@@ -405,5 +403,44 @@ describe('ElementHandle specs', function () {
expect(element).toBeDefined();
});
it('should work when both queryOne and queryAll are registered', async () => {
const { page, puppeteer } = getTestState();
await page.setContent(
'<div id="not-foo"></div><div class="foo"><div id="nested-foo" class="foo"/></div><div class="foo baz">Foo2</div>'
);
puppeteer.__experimental_registerCustomQueryHandler('getByClass', {
queryOne: (element, selector) => element.querySelector(`.${selector}`),
queryAll: (element, selector) =>
element.querySelectorAll(`.${selector}`),
});
const element = await page.$('getByClass/foo');
expect(element).toBeDefined();
const elements = await page.$$('getByClass/foo');
expect(elements.length).toBe(3);
});
it('should eval when both queryOne and queryAll are registered', async () => {
const { page, puppeteer } = getTestState();
await page.setContent(
'<div id="not-foo"></div><div class="foo">text</div><div class="foo baz">content</div>'
);
puppeteer.__experimental_registerCustomQueryHandler('getByClass', {
queryOne: (element, selector) => element.querySelector(`.${selector}`),
queryAll: (element, selector) =>
element.querySelectorAll(`.${selector}`),
});
const txtContent = await page.$eval(
'getByClass/foo',
(div) => div.textContent
);
expect(txtContent).toBe('text');
const txtContents = await page.$$eval('getByClass/foo', (divs) =>
divs.map((d) => d.textContent).join('')
);
expect(txtContents).toBe('textcontent');
});
});
});