testing-library as a selector engine

Author: Zache

README.md

@@ -46,8 +46,37 @@ or
 ```bash
 yarn add --dev playwright-testing-library
 ```
+### 2a. Use _extend @playwright/test selectors_
 
-### 2a. Use _standalone queries_
+@playwright/test allows you to [extend the selectors](https://playwright.dev/docs/extensibility/#custom-selector-engines) that are available when making a locator. When testing this way it doesn't make sense to differentiate the queryBy and queryAllBy queries or use the get and find queries since we can leave it to playwright to be angry when you try to click a locator that matches multiple elements.
+
+You can use a Regex in these selectors, but since they are strings remember to escape any special characters as normal.
+
+You can use >> as normal to chain selectors in a locator.
+
+```js
+import baseTest from '@playwright/test'
+import { mixinFixtures, registerSelectorEngines } from '???';
+
+// extends the page fixture to include dom-testing-library
+const test = mixinFixtures(baseTest)
+// registers all of the By... selector engines
+registerSelectorEngines()
+
+const { expect, beforeEach } = test
+
+test('something', async ({page}) => {
+ //...
+ 
+ await page.locator('form >> ByLabelText=/username/i').type('Slartibartfast')
+
+ //...
+})
+
+```
+
+
+### 2b. Use _standalone queries_
 
 ```js
 const {webkit} = require('playwright') // or 'firefox' or 'chromium'
@@ -73,7 +102,7 @@ await $email.type('playwright@example.com')
 // ...
 ```
 
-### 2b. Use _extensions_
+### 2c. Use _extensions_
 
 ```js
 const {webkit} = require('playwright') // or 'firefox' or 'chromium'

lib/engine.ts

@@ -0,0 +1,121 @@
+import { readFileSync } from 'fs'
+import * as path from 'path'
+import { selectors } from '@playwright/test'
+import type {
+ Fixtures,
+ PlaywrightTestArgs,
+ PlaywrightTestOptions,
+ PlaywrightWorkerArgs,
+ PlaywrightWorkerOptions,
+ TestType,
+} from '@playwright/test';
+
+const domLibraryAsString = readFileSync(
+ path.join(__dirname, '../dom-testing-library.js'),
+ 'utf8',
+).replace(/process.env/g, '{}')
+
+const queryFixtures: Fixtures<
+ {},
+ {},
+ PlaywrightTestArgs & PlaywrightTestOptions,
+ PlaywrightWorkerArgs & PlaywrightWorkerOptions
+> = {
+ page: async ({ page }, use) => {
+ await page.addInitScript(domLibraryAsString)
+
+ await use(page)
+ }
+}
+
+export function mixinFixtures<
+ T extends PlaywrightTestArgs & PlaywrightTestOptions,
+ W extends PlaywrightWorkerArgs & PlaywrightWorkerOptions,
+ >(base: TestType<T, W>): TestType<T, W> {
+ return base.extend(queryFixtures);
+}
+
+
+export function registerSelectorEngines() {
+
+ selectors.register('ByPlaceholderText', () => ({
+ queryAll(root: unknown, selector: string) {
+ const turtle = /^\/(.+)\/([dumysig]*)/
+ const matches = turtle.exec(selector)
+
+ const match = matches !== null ? new RegExp(matches[1], matches[2]) : selector
+ // @ts-ignore
+ return __dom_testing_library__.__moduleExports.queryAllByPlaceholderText(root, match)
+ }
+ }))
+ selectors.register('ByText', () => ({
+ queryAll(root: unknown, selector: string) {
+ const turtle = /^\/(.+)\/([dumysig]*)/
+ const matches = turtle.exec(selector)
+
+ const match = matches !== null ? new RegExp(matches[1], matches[2]) : selector
+ // @ts-ignore
+ return __dom_testing_library__.__moduleExports.queryAllByText(root, match)
+ }
+ }))
+ selectors.register('ByLabelText', () => ({
+ queryAll(root: unknown, selector: string) {
+ const turtle = /^\/(.+)\/([dumysig]*)/
+ const matches = turtle.exec(selector)
+
+ const match = matches !== null ? new RegExp(matches[1], matches[2]) : selector
+ // @ts-ignore
+ return __dom_testing_library__.__moduleExports.queryAllByLabelText(root, match)
+ }
+ }))
+ selectors.register('ByAltText', () => ({
+ queryAll(root: unknown, selector: string) {
+ const turtle = /^\/(.+)\/([dumysig]*)/
+ const matches = turtle.exec(selector)
+
+ const match = matches !== null ? new RegExp(matches[1], matches[2]) : selector
+ // @ts-ignore
+ return __dom_testing_library__.__moduleExports.queryAllByAltText(root, match)
+ }
+ }))
+ selectors.register('ByTestId', () => ({
+ queryAll(root: unknown, selector: string) {
+ const turtle = /^\/(.+)\/([dumysig]*)/
+ const matches = turtle.exec(selector)
+
+ const match = matches !== null ? new RegExp(matches[1], matches[2]) : selector
+ // @ts-ignore
+ return __dom_testing_library__.__moduleExports.queryAllByTestId(root, match)
+ }
+ }))
+ selectors.register('ByTitle', () => ({
+ queryAll(root: unknown, selector: string) {
+ const turtle = /^\/(.+)\/([dumysig]*)/
+ const matches = turtle.exec(selector)
+
+ const match = matches !== null ? new RegExp(matches[1], matches[2]) : selector
+ // @ts-ignore
+ return __dom_testing_library__.__moduleExports.queryAllByTitle(root, match)
+ }
+ }))
+ selectors.register('ByRole', () => ({
+ queryAll(root: unknown, selector: string) {
+ const turtle = /^\/(.+)\/([dumysig]*)/
+ const matches = turtle.exec(selector)
+
+ const match = matches !== null ? new RegExp(matches[1], matches[2]) : selector
+ // @ts-ignore
+ return __dom_testing_library__.__moduleExports.queryAllByRole(root, match)
+ }
+ }))
+ selectors.register('ByDisplayValue', () => ({
+ queryAll(root: unknown, selector: string) {
+ const turtle = /^\/(.+)\/([dumysig]*)/
+ const matches = turtle.exec(selector)
+
+ const match = matches !== null ? new RegExp(matches[1], matches[2]) : selector
+ // @ts-ignore
+ return __dom_testing_library__.__moduleExports.queryAllByDisplayValue(root, match)
+ }
+ })) 
+}