mirror of
https://github.com/puppeteer/puppeteer
synced 2024-06-14 14:02:48 +00:00
feat: change QueryHandler to contain QueryOne and QueryAll methods (#6218)
Co-authored-by: Mathias Bynens <mathias@qiwi.be>
This commit is contained in:
@@ -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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user