Skip to content

Commit de3e94d

Browse files
radmorecameronradmorecameron
authored
chore(test): Playwright improvements, remove try catch in accessibility tests and fix lint issues (#1127)
* Remove try catch from all accessibility tests * Use import instead of require for AxeBuilder * Remove redundant awaits for page.locator
1 parent 8ed69f9 commit de3e94d

36 files changed

Lines changed: 420 additions & 666 deletions

File tree

‎packages/web/src/components/gcds-alert/test/gcds-alert.e2e.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
const { AxeBuilder } = require('@axe-core/playwright');
1+
import { AxeBuilder } from '@axe-core/playwright';
22

33
import { expect } from '@playwright/test';
44
import { test } from '../../../../tests/base';
55

66
test.describe('gcds-alert', () => {
77
test('renders', async ({ page }) => {
8-
const alerts = await page.locator('gcds-alert');
8+
const alerts = page.locator('gcds-alert');
99
const count = await alerts.count();
1010

1111
for (let i = 0; i < count; i++) {

‎packages/web/src/components/gcds-breadcrumbs-item/test/gcds-breadcrumbs-item.e2e.ts‎

Lines changed: 18 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const { AxeBuilder } = require('@axe-core/playwright');
1+
import { AxeBuilder } from '@axe-core/playwright';
22

33
import { expect } from '@playwright/test';
44
import { test } from '@stencil/playwright';
@@ -16,7 +16,7 @@ test.beforeEach(async ({ page }) => {
1616

1717
test.describe('gcds-breadcrumbs-item', () => {
1818
test('renders', async ({ page }) => {
19-
const element = await page.locator('gcds-breadcrumbs');
19+
const element = page.locator('gcds-breadcrumbs');
2020

2121
// Wait for element to attach and become visible, allowing up to 10s
2222
await element.waitFor({ state: 'attached' });
@@ -27,15 +27,15 @@ test.describe('gcds-breadcrumbs-item', () => {
2727
await expect(element).toHaveClass('hydrated');
2828

2929
// Check first breadcrumb item role
30-
const firstItem = await page.locator('gcds-breadcrumbs-item').first();
30+
const firstItem = page.locator('gcds-breadcrumbs-item').first();
3131
await expect(firstItem).toHaveRole('listitem');
3232
});
3333

3434
test('fires gcdsClick and click event', async ({ page }) => {
3535
const gcdsClick = await page.spyOnEvent('gcdsClick');
3636
const click = await page.spyOnEvent('click');
3737

38-
const element = await page.locator('gcds-breadcrumbs-item').last();
38+
const element = page.locator('gcds-breadcrumbs-item').last();
3939

4040
// Wait for element to attach and become visible, allowing up to 10s
4141
await element.waitFor({ state: 'attached' });
@@ -62,37 +62,25 @@ test.describe('gcds-breadcrumbs-item a11y tests', () => {
6262
.first()
6363
.evaluate(el => ((el as HTMLElement).innerText = 'Colour contrast'));
6464

65-
try {
66-
const results = await new AxeBuilder({ page })
67-
.withRules(['color-contrast'])
68-
.analyze();
69-
expect(results.violations).toHaveLength(0);
70-
} catch (e) {
71-
console.error(e);
72-
}
65+
const results = await new AxeBuilder({ page })
66+
.withRules(['color-contrast'])
67+
.analyze();
68+
expect(results.violations).toHaveLength(0);
7369
});
7470

7571
test('Proper list structure', async ({ page }) => {
76-
try {
77-
const results = await new AxeBuilder({ page })
78-
.withRules(['list'])
79-
.analyze();
80-
81-
expect(results.violations).toHaveLength(0);
82-
} catch (e) {
83-
console.error(e);
84-
}
72+
const results = await new AxeBuilder({ page })
73+
.withRules(['list'])
74+
.analyze();
75+
76+
expect(results.violations).toHaveLength(0);
8577
});
8678

8779
test('Proper link names', async ({ page }) => {
88-
try {
89-
const results = await new AxeBuilder({ page })
90-
.withRules(['link-name'])
91-
.analyze();
92-
93-
expect(results.violations).toHaveLength(0);
94-
} catch (e) {
95-
console.error(e);
96-
}
80+
const results = await new AxeBuilder({ page })
81+
.withRules(['link-name'])
82+
.analyze();
83+
84+
expect(results.violations).toHaveLength(0);
9785
});
9886
});

‎packages/web/src/components/gcds-breadcrumbs/test/gcds-breadcrumbs.e2e.ts‎

Lines changed: 15 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
const { AxeBuilder } = require('@axe-core/playwright');
1+
import { AxeBuilder } from '@axe-core/playwright';
22

33
import { expect } from '@playwright/test';
44
import { test } from '../../../../tests/base';
55

66
test.describe('gcds-breadcrumbs', () => {
77
test('renders', async ({ page }) => {
8-
const element = await page.locator('gcds-breadcrumbs');
8+
const element = page.locator('gcds-breadcrumbs');
99

1010
// Wait for element to attach and become visible, allowing up to 10s
1111
await element.waitFor({ state: 'attached' });
@@ -16,7 +16,7 @@ test.describe('gcds-breadcrumbs', () => {
1616
await expect(element).toHaveClass('hydrated');
1717

1818
// Check first breadcrumb item role
19-
const firstItem = await page.locator('gcds-breadcrumbs-item').first();
19+
const firstItem = page.locator('gcds-breadcrumbs-item').first();
2020
await expect(firstItem).toHaveRole('listitem');
2121
});
2222
});
@@ -34,37 +34,25 @@ test.describe('gcds-breadcrumbs a11y tests', () => {
3434
.first()
3535
.evaluate(el => ((el as HTMLElement).innerText = 'Colour contrast'));
3636

37-
try {
38-
const results = await new AxeBuilder({ page })
39-
.withRules(['color-contrast'])
40-
.analyze();
41-
expect(results.violations).toHaveLength(0);
42-
} catch (e) {
43-
console.error(e);
44-
}
37+
const results = await new AxeBuilder({ page })
38+
.withRules(['color-contrast'])
39+
.analyze();
40+
expect(results.violations).toHaveLength(0);
4541
});
4642

4743
test('Proper list structure', async ({ page }) => {
48-
try {
49-
const results = await new AxeBuilder({ page })
50-
.withRules(['list'])
51-
.analyze();
44+
const results = await new AxeBuilder({ page })
45+
.withRules(['list'])
46+
.analyze();
5247

53-
expect(results.violations).toHaveLength(0);
54-
} catch (e) {
55-
console.error(e);
56-
}
48+
expect(results.violations).toHaveLength(0);
5749
});
5850

5951
test('Proper link names', async ({ page }) => {
60-
try {
61-
const results = await new AxeBuilder({ page })
62-
.withRules(['link-name'])
63-
.analyze();
52+
const results = await new AxeBuilder({ page })
53+
.withRules(['link-name'])
54+
.analyze();
6455

65-
expect(results.violations).toHaveLength(0);
66-
} catch (e) {
67-
console.error(e);
68-
}
56+
expect(results.violations).toHaveLength(0);
6957
});
7058
});

‎packages/web/src/components/gcds-button/test/gcds-button.e2e.ts‎

Lines changed: 17 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
const { AxeBuilder } = require('@axe-core/playwright');
1+
import { AxeBuilder } from '@axe-core/playwright';
22

33
import { expect } from '@playwright/test';
44
import { test } from '../../../../tests/base';
55

66
test.describe('gcds-button', () => {
77
test('renders', async ({ page }) => {
8-
const buttons = await page.locator('gcds-button');
8+
const buttons = page.locator('gcds-button');
99
const count = await buttons.count();
1010

1111
for (let i = 0; i < count; i++) {
@@ -62,49 +62,37 @@ test.describe('gcds-button a11y tests', () => {
6262
.first()
6363
.evaluate(el => ((el as HTMLElement).innerText = 'Colour contrast'));
6464

65-
const buttons = await page.locator('button');
65+
const buttons = page.locator('button');
6666

6767
for (let i = 0; i < (await buttons.count()); i++) {
6868
buttons
6969
.nth(i)
7070
.evaluate(el => ((el as HTMLElement).innerText = 'Colour contrast'));
7171
}
7272

73-
try {
74-
const results = await new AxeBuilder({ page })
75-
.withRules(['color-contrast'])
76-
.analyze();
77-
expect(results.violations).toHaveLength(0);
78-
} catch (e) {
79-
console.error(e);
80-
}
73+
const results = await new AxeBuilder({ page })
74+
.withRules(['color-contrast'])
75+
.analyze();
76+
expect(results.violations).toHaveLength(0);
8177
});
8278

8379
/**
8480
* Proper names
8581
*/
8682
test('Proper link names', async ({ page }) => {
87-
try {
88-
const results = await new AxeBuilder({ page })
89-
.withRules(['link-name'])
90-
.analyze();
91-
92-
expect(results.violations).toHaveLength(0);
93-
} catch (e) {
94-
console.error(e);
95-
}
83+
const results = await new AxeBuilder({ page })
84+
.withRules(['link-name'])
85+
.analyze();
86+
87+
expect(results.violations).toHaveLength(0);
9688
});
9789

9890
test('Proper button names', async ({ page }) => {
99-
try {
100-
const results = await new AxeBuilder({ page })
101-
.withRules(['button-name'])
102-
.analyze();
103-
104-
expect(results.violations).toHaveLength(0);
105-
} catch (e) {
106-
console.error(e);
107-
}
91+
const results = await new AxeBuilder({ page })
92+
.withRules(['button-name'])
93+
.analyze();
94+
95+
expect(results.violations).toHaveLength(0);
10896
});
10997

11098
/**

‎packages/web/src/components/gcds-card/test/gcds-card.e2e.ts‎

Lines changed: 19 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
const { AxeBuilder } = require('@axe-core/playwright');
1+
import { AxeBuilder } from '@axe-core/playwright';
22

33
import { expect } from '@playwright/test';
44
import { test } from '../../../../tests/base';
55

66
test.describe('gcds-card', () => {
77
test('renders', async ({ page }) => {
8-
const element = await page.locator('gcds-card');
8+
const element = page.locator('gcds-card');
99

1010
// Wait for element to attach and become visible, allowing up to 10s
1111
await element.waitFor({ state: 'attached' });
@@ -36,31 +36,21 @@ test.describe('gcds-card', () => {
3636

3737
test.describe('gcds-card a11y tests', () => {
3838
test('Colour contrast', async ({ page }) => {
39-
try {
40-
const results = await new AxeBuilder({ page })
41-
.withRules(['color-contrast'])
42-
.analyze();
43-
expect(results.violations).toHaveLength(0);
44-
} catch (e) {
45-
console.error(e);
46-
}
39+
const results = await new AxeBuilder({ page })
40+
.withRules(['color-contrast'])
41+
.analyze();
42+
expect(results.violations).toHaveLength(0);
4743
});
4844

4945
test('Link name', async ({ page }) => {
50-
try {
51-
const results = await new AxeBuilder({ page })
52-
.withRules(['link-name'])
53-
.analyze();
54-
expect(results.violations).toHaveLength(0);
55-
} catch (e) {
56-
console.error(e);
57-
}
46+
const results = await new AxeBuilder({ page })
47+
.withRules(['link-name'])
48+
.analyze();
49+
expect(results.violations).toHaveLength(0);
5850
});
5951

6052
test('Keyboard focus', async ({ page }) => {
61-
const linkText = await (
62-
await page.locator('.gcds-card__title')
63-
).innerText();
53+
const linkText = await page.locator('.gcds-card__title').innerText();
6454

6555
await page.keyboard.press('Tab');
6656

@@ -74,14 +64,10 @@ test.describe('gcds-card a11y tests', () => {
7464
});
7565

7666
test('Alt text - no alt text', async ({ page }) => {
77-
try {
78-
const results = await new AxeBuilder({ page })
79-
.withRules(['image-alt'])
80-
.analyze();
81-
expect(results.violations).toHaveLength(0);
82-
} catch (e) {
83-
console.error(e);
84-
}
67+
const results = await new AxeBuilder({ page })
68+
.withRules(['image-alt'])
69+
.analyze();
70+
expect(results.violations).toHaveLength(0);
8571
});
8672

8773
test('Alt text w/ img-alt prop', async ({ page }) => {
@@ -91,13 +77,9 @@ test.describe('gcds-card a11y tests', () => {
9177

9278
await page.waitForChanges();
9379

94-
try {
95-
const results = await new AxeBuilder({ page })
96-
.withRules(['image-alt'])
97-
.analyze();
98-
expect(results.violations).toHaveLength(0);
99-
} catch (e) {
100-
console.error(e);
101-
}
80+
const results = await new AxeBuilder({ page })
81+
.withRules(['image-alt'])
82+
.analyze();
83+
expect(results.violations).toHaveLength(0);
10284
});
10385
});

0 commit comments

Comments
 (0)