diff --git a/.travis.yml b/.travis.yml
index c9540e0..59ad579 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -8,7 +8,7 @@ branches:
- master
- next
node_js:
- - node
+ - v14
- v12
- v10
env:
diff --git a/README.md b/README.md
index 761d4bf..3f3b813 100644
--- a/README.md
+++ b/README.md
@@ -35,7 +35,7 @@ All your favorite user-centric querying functions from **@testing-library/react*
```js
const {webkit} = require('playwright') // or 'firefox' or 'chromium'
-const {getDocument, queries, wait} = require('playwright-testing-library')
+const {getDocument, queries, waitFor} = require('playwright-testing-library')
const {getByTestId, getByLabelText} = queries
@@ -51,7 +51,7 @@ const $email = await getByLabelText($form, 'Email')
// interact with playwright like usual
await $email.type('playwright@example.com')
// waiting works too!
-await wait(() => getByText($document, 'Loading...'))
+await waitFor(() => getByText($document, 'Loading...'))
```
A little too un-playwright for you? We've got prototype-mucking covered too :)
diff --git a/lib/__tests__/fixtures/page.html b/lib/__tests__/fixtures/page.html
index 227d8a8..484a179 100644
--- a/lib/__tests__/fixtures/page.html
+++ b/lib/__tests__/fixtures/page.html
@@ -2,11 +2,11 @@
- Hello h1
- Hello h2
+ Hello h1
+ Hello h2
![Image A]()
-
+
diff --git a/lib/__tests__/index.ts b/lib/__tests__/index.ts
index 373aa54..5e72260 100644
--- a/lib/__tests__/index.ts
+++ b/lib/__tests__/index.ts
@@ -1,6 +1,6 @@
import * as path from 'path'
import * as playwright from 'playwright'
-import {getDocument, queries, getQueriesForElement, wait} from '..'
+import {getDocument, queries, getQueriesForElement, waitFor, configure} from '..'
describe('lib/index.ts', () => {
let browser: playwright.Browser
@@ -18,6 +18,30 @@ describe('lib/index.ts', () => {
expect(await queries.getNodeText(element)).toEqual('Hello h1')
})
+ it('should support custom data-testid attribute name', async () => {
+ configure({testIdAttribute: 'data-id'})
+ const document = await getDocument(page)
+ const element = await queries.getByTestId(document, 'second-level-header')
+ expect(await queries.getNodeText(element)).toEqual('Hello h2')
+ })
+
+ it('should support subsequent changing the data-testid attribute names', async () => {
+ configure({testIdAttribute: 'data-id'})
+ configure({testIdAttribute: 'data-new-id'})
+ const document = await getDocument(page)
+ const element = await queries.getByTestId(document, 'first-level-header')
+ expect(await queries.getNodeText(element)).toEqual('Hello h1')
+ })
+
+ it('should keep the default data-testid when input passed is invalid', async () => {
+ ;[{}, undefined, null, {testIdAttribute: ''}].forEach(async options => {
+ const document = await getDocument(page)
+ configure(options as any)
+ const element = await queries.getByTestId(document, 'testid-label')
+ expect(await queries.getNodeText(element)).toEqual('Label A')
+ })
+ })
+
it('should support regex on raw queries object', async () => {
const scope = await page.$('#scoped')
if (!scope) throw new Error('Should have scope')
@@ -38,10 +62,14 @@ describe('lib/index.ts', () => {
it('should use `wait` properly', async () => {
const {getByText} = getQueriesForElement(await getDocument(page))
// eslint-disable-next-line @typescript-eslint/no-misused-promises
- await wait(() => getByText('Loaded!'), {timeout: 7000})
+ await waitFor(() => getByText('Loaded!'), {timeout: 7000})
expect(await getByText('Loaded!')).toBeTruthy()
}, 9000)
+ afterEach(() => {
+ configure({testIdAttribute: 'data-testid'}) // cleanup
+ })
+
afterAll(async () => {
await browser.close()
})
diff --git a/lib/index.ts b/lib/index.ts
index 638cd00..ce7b479 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -3,7 +3,7 @@ import * as path from 'path'
import {JSHandle, Page} from 'playwright'
import waitForExpect from 'wait-for-expect'
-import {ElementHandle, IQueryUtils, IScopedQueryUtils} from './typedefs'
+import {ElementHandle, IConfigureOptions, IQueryUtils, IScopedQueryUtils} from './typedefs'
const domLibraryAsString = readFileSync(
path.join(__dirname, '../dom-testing-library.js'),
@@ -17,7 +17,7 @@ function mapArgument(argument: any, index: number): any {
: argument
}
-const delegateFnBodyToExecuteInPage = `
+const delegateFnBodyToExecuteInPageInitial = `
${domLibraryAsString};
const mappedArgs = args.map(${mapArgument.toString()});
@@ -27,6 +27,8 @@ const delegateFnBodyToExecuteInPage = `
return moduleWithFns[fnName](container, ...mappedArgs);
`
+let delegateFnBodyToExecuteInPage = delegateFnBodyToExecuteInPageInitial
+
type DOMReturnType = ElementHandle | ElementHandle[] | null
type ContextFn = (...args: any[]) => ElementHandle
@@ -132,6 +134,23 @@ export function wait(
return waitForExpect(callback, timeout, interval)
}
+export const waitFor = wait
+
+export function configure(options: Partial): void {
+ if (!options) {
+ return
+ }
+
+ const {testIdAttribute} = options
+
+ if (testIdAttribute) {
+ delegateFnBodyToExecuteInPage = delegateFnBodyToExecuteInPageInitial.replace(
+ /testIdAttribute: (['|"])data-testid(['|"])/g,
+ `testIdAttribute: $1${testIdAttribute}$2`,
+ )
+ }
+}
+
export function getQueriesForElement(
object: T,
contextFn?: ContextFn,
diff --git a/lib/typedefs.ts b/lib/typedefs.ts
index 2e80545..77b7907 100644
--- a/lib/typedefs.ts
+++ b/lib/typedefs.ts
@@ -63,3 +63,7 @@ export interface IQueryUtils extends IQueryMethods {
getQueriesForElement(): IQueryUtils & IScopedQueryUtils
getNodeText(el: Element): Promise
}
+
+export interface IConfigureOptions {
+ testIdAttribute: string
+}
diff --git a/package.json b/package.json
index 77659d5..4bc4ed9 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,6 @@
"playwright": "^1.1.0"
},
"engines": {
- "node": "^10 || ^12 || ^13 || ^14"
+ "node": ">=10"
}
}