Skip to content
This repository was archived by the owner on Aug 6, 2025. It is now read-only.

Commit ddb4fd3

Browse files
jrolfsjrolfs
committed
test: isolate 'standard' page (no timeout) in describe blocks
1 parent 930eabf commit ddb4fd3

File tree

2 files changed

+249
-234
lines changed

2 files changed

+249
-234
lines changed

‎test/fixture/element-handles.test.ts‎

Lines changed: 136 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -10,187 +10,196 @@ const test = playwright.test.extend<TestingLibraryFixtures>(fixtures)
1010
const {expect} = test
1111

1212
test.describe('lib/fixture.ts', () => {
13-
test.beforeEach(async ({page}) => {
14-
await page.goto(`file://${path.join(__dirname, '../fixtures/page.html')}`)
15-
})
16-
17-
test('should handle the query* methods', async ({queries: {queryByText}}) => {
18-
const element = await queryByText('Hello h1')
13+
test.describe('standard page', () => {
14+
test.beforeEach(async ({page}) => {
15+
await page.goto(`file://${path.join(__dirname, '../fixtures/page.html')}`)
16+
})
1917

20-
expect(element).toBeTruthy()
21-
expect(await element.textContent()).toEqual('Hello h1')
22-
})
18+
test.afterEach(async ({page}) => page.close())
2319

24-
test('should use the new v3 methods', async ({queries: {queryByRole}}) => {
25-
const element = await queryByRole('presentation')
20+
test('should handle the query* methods', async ({queries: {queryByText}}) => {
21+
const element = await queryByText('Hello h1')
2622

27-
expect(element).toBeTruthy()
28-
expect(await element.textContent()).toContain('Layout table')
29-
})
23+
expect(element).toBeTruthy()
24+
expect(await element.textContent()).toEqual('Hello h1')
25+
})
3026

31-
test('should handle regex matching', async ({queries: {queryByText}}) => {
32-
const element = await queryByText(/HeLlO h(1|7)/i)
27+
test('should use the new v3 methods', async ({queries: {queryByRole}}) => {
28+
const element = await queryByRole('presentation')
3329

34-
expect(element).toBeTruthy()
35-
expect(await element.textContent()).toEqual('Hello h1')
36-
})
30+
expect(element).toBeTruthy()
31+
expect(await element.textContent()).toContain('Layout table')
32+
})
3733

38-
test('should handle the get* methods', async ({queries: {getByTestId}, page}) => {
39-
const element = await getByTestId('testid-text-input')
34+
test('should handle regex matching', async ({queries: {queryByText}}) => {
35+
const element = await queryByText(/HeLlO h(1|7)/i)
4036

41-
expect(await page.evaluate(el => el.outerHTML, element)).toMatch(
42-
`<input type="text" data-testid="testid-text-input">`,
43-
)
44-
})
37+
expect(element).toBeTruthy()
38+
expect(await element.textContent()).toEqual('Hello h1')
39+
})
4540

46-
test('attaches `getNodeText`', async ({queries}) => {
47-
const element = await queries.getByText('Hello h1')
41+
test('should handle the get* methods', async ({queries: {getByTestId}, page}) => {
42+
const element = await getByTestId('testid-text-input')
4843

49-
expect(await queries.getNodeText(element)).toEqual('Hello h1')
50-
})
44+
expect(await page.evaluate(el => el.outerHTML, element)).toMatch(
45+
`<input type="text" data-testid="testid-text-input">`,
46+
)
47+
})
5148

52-
test('handles page navigations', async ({queries: {getByText}, page}) => {
53-
await page.goto(`file://${path.join(__dirname, '../fixtures/page.html')}`)
49+
test('attaches `getNodeText`', async ({queries}) => {
50+
const element = await queries.getByText('Hello h1')
5451

55-
const element = await getByText('Hello h1')
52+
expect(await queries.getNodeText(element)).toEqual('Hello h1')
53+
})
5654

57-
expect(await element.textContent()).toEqual('Hello h1')
58-
})
55+
test('handles page navigations', async ({queries: {getByText}, page}) => {
56+
await page.goto(`file://${path.join(__dirname, '../fixtures/page.html')}`)
5957

60-
test('should handle the get* method failures', async ({queries}) => {
61-
const {getByTitle} = queries
62-
// Use the scoped element so the pretty HTML snapshot is smaller
58+
const element = await getByText('Hello h1')
6359

64-
await expect(async () => getByTitle('missing')).rejects.toThrow()
65-
})
60+
expect(await element.textContent()).toEqual('Hello h1')
61+
})
6662

67-
test('should handle the LabelText methods', async ({queries, page}) => {
68-
const {getByLabelText} = queries
69-
const element = await getByLabelText('Label A')
70-
/* istanbul ignore next */
71-
expect(await page.evaluate(el => el.outerHTML, element)).toMatch(
72-
`<input id="label-text-input" type="text">`,
73-
)
74-
})
63+
test('should handle the get* method failures', async ({queries}) => {
64+
const {getByTitle} = queries
65+
// Use the scoped element so the pretty HTML snapshot is smaller
7566

76-
test('should handle the queryAll* methods', async ({queries, page}) => {
77-
const {queryAllByText} = queries
78-
const elements = await queryAllByText(/Hello/)
79-
expect(elements).toHaveLength(3)
67+
await expect(async () => getByTitle('missing')).rejects.toThrow()
68+
})
8069

81-
const text = await Promise.all([
82-
page.evaluate(el => el.textContent, elements[0]),
83-
page.evaluate(el => el.textContent, elements[1]),
84-
page.evaluate(el => el.textContent, elements[2]),
85-
])
70+
test('should handle the LabelText methods', async ({queries, page}) => {
71+
const {getByLabelText} = queries
72+
const element = await getByLabelText('Label A')
73+
/* istanbul ignore next */
74+
expect(await page.evaluate(el => el.outerHTML, element)).toMatch(
75+
`<input id="label-text-input" type="text">`,
76+
)
77+
})
8678

87-
expect(text).toEqual(['Hello h1', 'Hello h2', 'Hello h3'])
88-
})
79+
test('should handle the queryAll* methods', async ({queries, page}) => {
80+
const {queryAllByText} = queries
81+
const elements = await queryAllByText(/Hello/)
82+
expect(elements).toHaveLength(3)
8983

90-
test('should handle the queryAll* methods with a selector', async ({queries, page}) => {
91-
const {queryAllByText} = queries
92-
const elements = await queryAllByText(/Hello/, {selector: 'h2'})
93-
expect(elements).toHaveLength(1)
84+
const text = await Promise.all([
85+
page.evaluate(el => el.textContent, elements[0]),
86+
page.evaluate(el => el.textContent, elements[1]),
87+
page.evaluate(el => el.textContent, elements[2]),
88+
])
9489

95-
const text = await page.evaluate(el => el.textContent, elements[0])
90+
expect(text).toEqual(['Hello h1', 'Hello h2', 'Hello h3'])
91+
})
9692

97-
expect(text).toEqual('Hello h2')
98-
})
93+
test('should handle the queryAll* methods with a selector', async ({queries, page}) => {
94+
const {queryAllByText} = queries
95+
const elements = await queryAllByText(/Hello/, {selector: 'h2'})
96+
expect(elements).toHaveLength(1)
9997

100-
test('should handle the getBy* methods with a selector', async ({queries, page}) => {
101-
const {getByText} = queries
102-
const element = await getByText(/Hello/, {selector: 'h2'})
98+
const text = await page.evaluate(el => el.textContent, elements[0])
10399

104-
const text = await page.evaluate(el => el.textContent, element)
100+
expect(text).toEqual('Hello h2')
101+
})
105102

106-
expect(text).toEqual('Hello h2')
107-
})
103+
test('should handle the getBy* methods with a selector', async ({queries, page}) => {
104+
const {getByText} = queries
105+
const element = await getByText(/Hello/, {selector: 'h2'})
108106

109-
test('should handle the getBy* methods with a regex name', async ({queries, page}) => {
110-
const {getByRole} = queries
111-
const element = await getByRole('button', {name: /getBy.*Test/})
107+
const text = await page.evaluate(el => el.textContent, element)
112108

113-
const text = await page.evaluate(el => el.textContent, element)
109+
expect(text).toEqual('Hello h2')
110+
})
114111

115-
expect(text).toEqual('getByRole Test')
116-
})
112+
test('should handle the getBy* methods with a regex name', async ({queries, page}) => {
113+
const {getByRole} = queries
114+
const element = await getByRole('button', {name: /getBy.*Test/})
117115

118-
test('supports `hidden` option when querying by role', async ({queries: {queryAllByRole}}) => {
119-
const elements = await queryAllByRole('img')
120-
const hiddenElements = await queryAllByRole('img', {hidden: true})
116+
const text = await page.evaluate(el => el.textContent, element)
121117

122-
expect(elements).toHaveLength(1)
123-
expect(hiddenElements).toHaveLength(2)
124-
})
118+
expect(text).toEqual('getByRole Test')
119+
})
125120

126-
test.describe('querying by role with `level` option', () => {
127-
test('retrieves the correct elements when querying all by role', async ({
128-
queries: {queryAllByRole},
129-
}) => {
130-
const elements = await queryAllByRole('heading')
131-
const levelOneElements = await queryAllByRole('heading', {level: 3})
121+
test('supports `hidden` option when querying by role', async ({queries: {queryAllByRole}}) => {
122+
const elements = await queryAllByRole('img')
123+
const hiddenElements = await queryAllByRole('img', {hidden: true})
132124

133-
expect(elements).toHaveLength(3)
134-
expect(levelOneElements).toHaveLength(1)
125+
expect(elements).toHaveLength(1)
126+
expect(hiddenElements).toHaveLength(2)
135127
})
136128

137-
test('does not throw when querying for a specific element', async ({queries: {getByRole}}) => {
138-
await expect(getByRole('heading', {level: 3})).resolves.not.toThrow()
129+
test.describe('querying by role with `level` option', () => {
130+
test('retrieves the correct elements when querying all by role', async ({
131+
queries: {queryAllByRole},
132+
}) => {
133+
const elements = await queryAllByRole('heading')
134+
const levelOneElements = await queryAllByRole('heading', {level: 3})
135+
136+
expect(elements).toHaveLength(3)
137+
expect(levelOneElements).toHaveLength(1)
138+
})
139+
140+
test('does not throw when querying for a specific element', async ({
141+
queries: {getByRole},
142+
}) => {
143+
await expect(getByRole('heading', {level: 3})).resolves.not.toThrow()
144+
})
139145
})
140-
})
141146

142-
test('should get text content', async ({page}) => {
143-
const document = await getDocument(page)
144-
const $h3 = await document.$('#scoped h3')
147+
test('should get text content', async ({page}) => {
148+
const document = await getDocument(page)
149+
const $h3 = await document.$('#scoped h3')
145150

146-
expect(await $h3.textContent()).toEqual('Hello h3')
147-
})
148-
149-
test('scoping queries with `within`', async ({queries: {getByTestId}}) => {
150-
// eslint-disable-next-line @typescript-eslint/unbound-method
151-
const {queryByText} = within(await getByTestId('scoped'))
151+
expect(await $h3.textContent()).toEqual('Hello h3')
152+
})
152153

153-
expect(await queryByText('Hello h1')).toBeFalsy()
154-
expect(await queryByText('Hello h3')).toBeTruthy()
155-
})
154+
test('scoping queries with `within`', async ({queries: {getByTestId}}) => {
155+
// eslint-disable-next-line @typescript-eslint/unbound-method
156+
const {queryByText} = within(await getByTestId('scoped'))
156157

157-
test('scoping queries with `getQueriesForElement`', async ({queries: {getByTestId}}) => {
158-
// eslint-disable-next-line @typescript-eslint/unbound-method
159-
const {queryByText} = getQueriesForElement(await getByTestId('scoped'))
158+
expect(await queryByText('Hello h1')).toBeFalsy()
159+
expect(await queryByText('Hello h3')).toBeTruthy()
160+
})
160161

161-
expect(await queryByText('Hello h1')).toBeFalsy()
162-
expect(await queryByText('Hello h3')).toBeTruthy()
163-
})
162+
test('scoping queries with `getQueriesForElement`', async ({queries: {getByTestId}}) => {
163+
// eslint-disable-next-line @typescript-eslint/unbound-method
164+
const {queryByText} = getQueriesForElement(await getByTestId('scoped'))
164165

165-
test.describe('configuration', () => {
166-
test.afterEach(() => {
167-
configure({testIdAttribute: 'data-testid'}) // cleanup
166+
expect(await queryByText('Hello h1')).toBeFalsy()
167+
expect(await queryByText('Hello h3')).toBeTruthy()
168168
})
169169

170-
test('should support custom data-testid attribute name', async ({queries}) => {
171-
configure({testIdAttribute: 'data-id'})
170+
test.describe('configuration', () => {
171+
test.afterEach(() => {
172+
configure({testIdAttribute: 'data-testid'}) // cleanup
173+
})
172174

173-
const element = await queries.getByTestId('second-level-header')
175+
test('should support custom data-testid attribute name', async ({queries}) => {
176+
configure({testIdAttribute: 'data-id'})
174177

175-
expect(await queries.getNodeText(element)).toEqual('Hello h2')
176-
})
178+
const element = await queries.getByTestId('second-level-header')
177179

178-
test('should support subsequent changing the data-testid attribute names', async ({
179-
queries,
180-
}) => {
181-
configure({testIdAttribute: 'data-id'})
182-
configure({testIdAttribute: 'data-new-id'})
180+
expect(await queries.getNodeText(element)).toEqual('Hello h2')
181+
})
183182

184-
const element = await queries.getByTestId('first-level-header')
183+
test('should support subsequent changing the data-testid attribute names', async ({
184+
queries,
185+
}) => {
186+
configure({testIdAttribute: 'data-id'})
187+
configure({testIdAttribute: 'data-new-id'})
185188

186-
expect(await queries.getNodeText(element)).toEqual('Hello h1')
189+
const element = await queries.getByTestId('first-level-header')
190+
191+
expect(await queries.getNodeText(element)).toEqual('Hello h1')
192+
})
187193
})
188194
})
195+
189196
test.describe('deferred page', () => {
190197
test.beforeEach(async ({page}) => {
191198
await page.goto(`file://${path.join(__dirname, '../fixtures/late-page.html')}`)
192199
})
193200

201+
test.afterEach(async ({page}) => page.close())
202+
194203
test('should handle the findBy* methods', async ({queries}) => {
195204
const {findByText} = queries
196205
expect(await findByText('Loaded!', {}, {timeout: 7000})).toBeTruthy()

0 commit comments

Comments
 (0)