@testing-library/dom is out of date

[cburgmer]

The main feature for us using testing-library is the use of ARIA roles (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) to navigate our complex DOM (https://testing-library.com/docs/queries/byrole/).

I was delighted to find out that Puppeteer supports that: https://developer.chrome.com/blog/puppetaria/.

It would be great if this was the standard way in pptr-testing-library to find elements.

[patrickhulce]

Thanks for filing @cburgmer!

I'm not sure I understand what the desired goal is here. This library specifically brings the same API that's standard to many other environments in the testing-library family, to puppeteer. The fact that puppeteer has a separate built-in selection API (and keeps improving it with awesome selectors like puppetaria 🎉 ) is fairly orthogonal to the API pptr-testing-library should offer. It just means you're less likely to actually need to use it :)

[cburgmer]

While I still don't fully understand the design of pptr-testing-library (all the functionality I use from react-testing-library works differently here), my assumption was with puppeteer supporting ARIA queries, it should be feasibly to translate the testing-library syntax into the puppeteer syntax to support the following queries:

getByRole, queryByRole, getAllByRole, queryAllByRole, findByRole, findAllByRole

For example

export const findAllByRole = (role, { name }) => {
   return await page.$(`aria/${name}[role="${role}"]`);
};

[patrickhulce]

it should be feasibly to translate the testing-library syntax into the puppeteer syntax to support the following queries:
getByRole, queryByRole, getAllByRole, queryAllByRole, findByRole, findAllByRole

Ah! We should get that for free already by just updating our @testing-library/dom dependency :)

[patrickhulce]

Wait, we already supported this long ago

pptr-testing-library/test/extend.test.ts

Lines 31 to 37 in 1ec4db0

	it('should use the new v3 methods', async () => {
	const element = await document.queryByRole('presentation')
	expect(element).toBeTruthy()
	/* istanbul ignore next */
	expect(await page.evaluate(el => el.textContent, element)).toContain('Layout table')
	})

just need to update the docs