Skip to content

Commit 67a0c2f

Browse files
Gigabyte5671Gigabyte5671
committed
Reduce potential test flakiness
By better following Playwright's guidelines.
1 parent 687959f commit 67a0c2f

File tree

6 files changed

+58
-103
lines changed

6 files changed

+58
-103
lines changed

‎tests/cascading.spec.ts‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -27,35 +27,29 @@ test('Cascading', async ({ page }) => {
2727

2828
// The body should have exactly two direct children.
2929
const bodyDirectChildren = page.locator('body > *');
30-
expect(await bodyDirectChildren.count()).toBe(2);
30+
await expect(bodyDirectChildren).toHaveCount(2);
3131

32-
// There should be exactly one anchor element.
32+
// There should be exactly one anchor element,
33+
// and its href attribute should be populated.
3334
const anchor = page.locator('a');
34-
expect(await anchor.count()).toBe(1);
35-
const anchorElement = await anchor.elementHandle();
36-
expect(anchorElement).toBeTruthy();
37-
38-
// The anchor's href attribute should be populated.
39-
const anchorHref = await anchorElement?.getAttribute('href');
40-
expect(anchorHref).toBe('https://example.com/page');
35+
await expect(anchor).toHaveCount(1);
36+
await expect(anchor).toHaveAttribute('href', 'https://example.com/page');
4137

4238
// The anchor should not have any text content.
39+
const anchorElement = await anchor.elementHandle();
4340
const anchorContent = await anchorElement?.innerHTML();
4441
expect(anchorContent).toBe('');
4542

4643
// The element with class `.more` should follow the anchor.
4744
const more = page.locator('a + .more');
48-
expect(await more.count()).toBe(1);
49-
const moreElement = await more.elementHandle();
50-
expect(moreElement).toBeTruthy();
45+
await expect(more).toHaveCount(1);
5146

5247
// There should be exactly one span element.
5348
const span = page.locator('span');
54-
expect(await span.count()).toBe(1);
55-
const spanElement = await span.elementHandle();
56-
expect(spanElement).toBeTruthy();
49+
await expect(span).toHaveCount(1);
5750

5851
// The span should have specific text content.
52+
const spanElement = await span.elementHandle();
5953
const spanContent = await spanElement?.innerHTML();
6054
expect(spanContent).toBe('B');
6155
};

‎tests/comma.spec.ts‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,35 +19,32 @@ test('Comma', async ({ page }) => {
1919

2020
// The body should have exactly three direct children.
2121
const bodyDirectChildren = page.locator('body > *');
22-
expect(await bodyDirectChildren.count()).toBe(3);
22+
await expect(bodyDirectChildren).toHaveCount(3);
2323

2424
// There should be exactly one heading element.
2525
const heading = page.locator('h1');
26-
expect(await heading.count()).toBe(1);
27-
const headingElement = await heading.elementHandle();
28-
expect(headingElement).toBeTruthy();
26+
await expect(heading).toHaveCount(1);
2927

3028
// The heading should have specific text content.
29+
const headingElement = await heading.elementHandle();
3130
const headingContent = await headingElement?.innerHTML();
3231
expect(headingContent).toBe('A');
3332

3433
// There should be exactly one element with class `.subtitle`.
3534
const subtitle = page.locator('.subtitle');
36-
expect(await subtitle.count()).toBe(1);
37-
const subtitleElement = await subtitle.elementHandle();
38-
expect(subtitleElement).toBeTruthy();
35+
await expect(subtitle).toHaveCount(1);
3936

4037
// The element with class `.subtitle` should have specific text content.
38+
const subtitleElement = await subtitle.elementHandle();
4139
const subtitleContent = await subtitleElement?.innerHTML();
4240
expect(subtitleContent).toBe('A');
4341

4442
// There should be exactly one element with class `.content`.
4543
const content = page.locator('.content');
46-
expect(await content.count()).toBe(1);
47-
const contentElement = await content.elementHandle();
48-
expect(contentElement).toBeTruthy();
44+
await expect(content).toHaveCount(1);
4945

5046
// The element with class `.content` should have specific text content.
47+
const contentElement = await content.elementHandle();
5148
const contentContent = await contentElement?.innerHTML();
5249
expect(contentContent).toBe('A');
5350
};

‎tests/ignored.spec.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,10 @@ test('Ignored', async ({ page }) => {
3535

3636
// The body should have exactly one child.
3737
const bodyDirectChildren = page.locator('body *');
38-
expect(await bodyDirectChildren.count()).toBe(1);
39-
const element = await bodyDirectChildren.elementHandle();
40-
expect(element).toBeTruthy();
38+
await expect(bodyDirectChildren).toHaveCount(1);
4139

4240
// That element should have specific text content.
41+
const element = await bodyDirectChildren.elementHandle();
4342
const content = await element?.innerHTML();
4443
expect(content).toBe('C');
4544
};

‎tests/import.spec.ts‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,18 @@ test('Import', async ({ page }) => {
1818

1919
// The body should have exactly four direct children.
2020
const bodyDirectChildren = page.locator('body > *');
21-
expect(await bodyDirectChildren.count()).toBe(4);
21+
await expect(bodyDirectChildren).toHaveCount(4);
2222

2323
// The body's direct children should be in a specific order.
2424
const last = page.locator('.first:first-child + .second + .third + .last:last-child');
25-
expect(await last.count()).toBe(1);
26-
const lastElement = await last.elementHandle();
27-
expect(lastElement).toBeTruthy();
25+
await expect(last).toHaveCount(1);
2826

2927
// There should be exactly one span element.
3028
const span = page.locator('span');
31-
expect(await span.count()).toBe(1);
32-
const spanElement = await span.elementHandle();
33-
expect(spanElement).toBeTruthy();
29+
await expect(span).toHaveCount(1);
3430

3531
// The span should have specific text content.
32+
const spanElement = await span.elementHandle();
3633
const spanContent = await spanElement?.innerHTML();
3734
expect(spanContent).toBe('A');
3835
};

‎tests/nth-child.spec.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,36 +32,35 @@ test('Nth-Child', async ({ page }) => {
3232

3333
// The body should have exactly eight direct children.
3434
const bodyDirectChildren = page.locator('body > *');
35-
expect(await bodyDirectChildren.count()).toBe(8);
35+
await expect(bodyDirectChildren).toHaveCount(8);
3636

3737
// The body's direct children should be in a specific order.
3838
const last = page.locator('div.first:first-child + span + span + span + span.last + span + span.second-to-last + span:last-child');
39-
expect(await last.count()).toBe(1);
40-
const lastElement = await last.elementHandle();
41-
expect(lastElement).toBeTruthy();
39+
await expect(last).toHaveCount(1);
4240

4341
// The first element should have specific text content.
4442
const first = page.locator('div.first:first-child');
45-
expect(await first.count()).toBe(1);
4643
const firstElement = await first.elementHandle();
4744
const firstContent = await firstElement?.innerHTML();
4845
expect(firstContent).toBe('B');
46+
await expect(first).toHaveCount(1);
4947

5048
// The fifth element should have specific text content.
5149
const fifth = page.locator('span.last:nth-child(5)');
52-
expect(await fifth.count()).toBe(1);
5350
const fifthElement = await fifth.elementHandle();
5451
const fifthContent = await fifthElement?.innerHTML();
5552
expect(fifthContent).toBe('C');
53+
await expect(fifth).toHaveCount(1);
5654

5755
// The seventh element should have specific text content.
5856
const seventh = page.locator('span.second-to-last:nth-child(7)');
59-
expect(await seventh.count()).toBe(1);
6057
const seventhElement = await seventh.elementHandle();
6158
const seventhContent = await seventhElement?.innerHTML();
6259
expect(seventhContent).toBe('F');
60+
await expect(seventh).toHaveCount(1);
6361

6462
// The last element should have specific text content.
63+
const lastElement = await last.elementHandle();
6564
const lastContent = await lastElement?.innerHTML();
6665
expect(lastContent).toBe('E');
6766
};

‎tests/sanitize.spec.ts‎

Lines changed: 30 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -23,42 +23,31 @@ test('Sanitization Off', async ({ page }) => {
2323

2424
// The body should have exactly two direct children.
2525
const bodyDirectChildren = page.locator('body > *');
26-
expect(await bodyDirectChildren.count()).toBe(2);
26+
await expect(bodyDirectChildren).toHaveCount(2);
2727

2828
// The body's direct children should be in a specific order.
29-
const last = page.locator('img:first-child + .last:last-child');
30-
expect(await last.count()).toBe(1);
31-
const lastElement = await last.elementHandle();
32-
expect(lastElement).toBeTruthy();
29+
const last = page.locator('body > img:first-child + .last:last-child');
30+
await expect(last).toHaveCount(1);
3331

3432
// There should be exactly one img element.
3533
const img = page.locator('img');
36-
expect(await img.count()).toBe(1);
37-
const imgElement = await img.elementHandle();
38-
expect(imgElement).toBeTruthy();
34+
await expect(img).toHaveCount(1);
3935

40-
// The img should have an `onerror` attribute.
41-
const imgAttribute = await imgElement?.getAttribute('onerror');
42-
expect(imgAttribute).toBeDefined();
43-
expect(imgAttribute?.length).toBeGreaterThan(10);
44-
45-
// The img should have an `xss` class.
46-
const imgClass = await imgElement?.getAttribute('class');
47-
expect(imgClass).toBe('xss');
36+
// The img should have an `onerror` attribute, and an `xss` class.
37+
await expect(img).toHaveAttribute('onerror', /.{10}/);
38+
await expect(img).toHaveClass('xss');
4839

4940
// There should be exactly one div element.
5041
const div = page.locator('div');
51-
expect(await div.count()).toBe(1);
52-
const divElement = await div.elementHandle();
53-
expect(divElement).toBeTruthy();
42+
await expect(div).toHaveCount(1);
5443

5544
// The div should have specific text content.
45+
const divElement = await div.elementHandle();
5646
const divContent = await divElement?.innerHTML();
5747
expect(divContent).toBe('A');
5848

5949
// The div should have an `onclick` attribute.
60-
const divAttribute = await divElement?.getAttribute('onclick');
61-
expect(divAttribute).toBe('console.log(\'foo\')');
50+
await expect(div).toHaveAttribute('onclick', 'console.log(\'foo\')');
6251

6352
// An 'xss' console message should be present.
6453
expect(consoleMessages.includes('xss')).toBe(true);
@@ -82,41 +71,31 @@ test('Sanitize Imports Only', async ({ page }) => {
8271

8372
// The body should have exactly two direct children.
8473
const bodyDirectChildren = page.locator('body > *');
85-
expect(await bodyDirectChildren.count()).toBe(2);
74+
await expect(bodyDirectChildren).toHaveCount(2);
8675

8776
// The body's direct children should be in a specific order.
88-
const last = page.locator('img:first-child + .last:last-child');
89-
expect(await last.count()).toBe(1);
90-
const lastElement = await last.elementHandle();
91-
expect(lastElement).toBeTruthy();
77+
const last = page.locator('body > img:first-child + .last:last-child');
78+
await expect(last).toHaveCount(1);
9279

9380
// There should be exactly one img element.
9481
const img = page.locator('img');
95-
expect(await img.count()).toBe(1);
96-
const imgElement = await img.elementHandle();
97-
expect(imgElement).toBeTruthy();
82+
await expect(img).toHaveCount(1);
9883

99-
// The img should not have an `onerror` attribute.
100-
const imgAttribute = await imgElement?.getAttribute('onerror');
101-
expect(imgAttribute).toBeNull();
102-
103-
// The img should not have an `xss` class.
104-
const imgClass = await imgElement?.getAttribute('class');
105-
expect(imgClass).toBeNull();
84+
// The img should not have an `onerror` attribute, nor an `xss` class.
85+
await expect(img).not.toHaveAttribute('onerror');
86+
await expect(img).not.toHaveClass('xss');
10687

10788
// There should be exactly one div element.
10889
const div = page.locator('div');
109-
expect(await div.count()).toBe(1);
110-
const divElement = await div.elementHandle();
111-
expect(divElement).toBeTruthy();
90+
await expect(div).toHaveCount(1);
11291

11392
// The div should have specific text content.
93+
const divElement = await div.elementHandle();
11494
const divContent = await divElement?.innerHTML();
11595
expect(divContent).toBe('A');
11696

11797
// The div should have an `onclick` attribute.
118-
const divAttribute = await divElement?.getAttribute('onclick');
119-
expect(divAttribute).toBe('console.log(\'foo\')');
98+
await expect(div).toHaveAttribute('onclick', 'console.log(\'foo\')');
12099

121100
// An 'xss' console message should not be present.
122101
expect(consoleMessages.includes('xss')).toBe(false);
@@ -134,41 +113,31 @@ test('Sanitize Imports Only', async ({ page }) => {
134113
async function expectEverythingToBeSanitized (page: Page): Promise<void> {
135114
// The body should have exactly two direct children.
136115
const bodyDirectChildren = page.locator('body > *');
137-
expect(await bodyDirectChildren.count()).toBe(2);
116+
await expect(bodyDirectChildren).toHaveCount(2);
138117

139118
// The body's direct children should be in a specific order.
140-
const last = page.locator('img:first-child + .last:last-child');
141-
expect(await last.count()).toBe(1);
142-
const lastElement = await last.elementHandle();
143-
expect(lastElement).toBeTruthy();
119+
const last = page.locator('body > img:first-child + .last:last-child');
120+
await expect(last).toHaveCount(1);
144121

145122
// There should be exactly one img element.
146123
const img = page.locator('img');
147-
expect(await img.count()).toBe(1);
148-
const imgElement = await img.elementHandle();
149-
expect(imgElement).toBeTruthy();
150-
151-
// The img should not have an `onerror` attribute.
152-
const imgAttribute = await imgElement?.getAttribute('onerror');
153-
expect(imgAttribute).toBeNull();
124+
await expect(img).toHaveCount(1);
154125

155-
// The img should not have an `xss` class.
156-
const imgClass = await imgElement?.getAttribute('class');
157-
expect(imgClass).toBeNull();
126+
// The img should not have an `onerror` attribute, nor an `xss` class.
127+
await expect(img).not.toHaveAttribute('onerror');
128+
await expect(img).not.toHaveClass('xss');
158129

159130
// There should be exactly one div element.
160131
const div = page.locator('div');
161-
expect(await div.count()).toBe(1);
162-
const divElement = await div.elementHandle();
163-
expect(divElement).toBeTruthy();
132+
await expect(div).toHaveCount(1);
164133

165134
// The div should have specific text content.
135+
const divElement = await div.elementHandle();
166136
const divContent = await divElement?.innerHTML();
167137
expect(divContent).toBe('A');
168138

169139
// The div should not have an `onclick` attribute.
170-
const divAttribute = await divElement?.getAttribute('onclick');
171-
expect(divAttribute).toBeNull();
140+
await expect(div).not.toHaveAttribute('onclick');
172141
}
173142

174143
test('Sanitize Everything', async ({ page }) => {

0 commit comments

Comments
 (0)