test: split accname, fix select preventing context closure

This commit is contained in:
Dmitry Gozman 2022-06-09 13:51:48 -07:00
parent 7ce17a97b1
commit 652ec2f1fa
2 changed files with 74 additions and 56 deletions

View File

@ -19,66 +19,76 @@ import fs from 'fs';
test.skip(({ mode }) => mode !== 'default');
test('wpt accname', async ({ page, asset, server, browserName }) => {
const skipped = [
// Spec clearly says to only use control's value when embedded in a label (step 2C).
'name_heading-combobox-focusable-alternative-manual.html',
// This test expects ::before + title + ::after, which is neither 2F nor 2I.
'name_test_case_659-manual.html',
// This test expects ::before + title + ::after, which is neither 2F nor 2I.
'name_test_case_660-manual.html',
];
if (browserName === 'firefox') {
// This test contains the following style:
// [data-after]:after { content: attr(data-after); }
// In firefox, content is returned as "attr(data-after)"
// instead of being resolved to the actual value.
skipped.push('name_test_case_553-manual.html');
}
const ranges = [
'name_test_case_539-manual.html',
'name_test_case_721-manual.html',
];
await page.addInitScript(() => {
const self = window as any;
self.setup = () => {};
self.ATTAcomm = class {
constructor(data) {
self.steps = [];
for (const step of data.steps) {
if (!step.test.ATK)
continue;
for (const atk of step.test.ATK) {
if (atk[0] !== 'property' || atk[1] !== 'name' || atk[2] !== 'is' || typeof atk[3] !== 'string')
for (let range = 0; range <= ranges.length; range++) {
test('wpt accname #' + range, async ({ page, asset, server, browserName }) => {
const skipped = [
// Spec clearly says to only use control's value when embedded in a label (step 2C).
'name_heading-combobox-focusable-alternative-manual.html',
// This test expects ::before + title + ::after, which is neither 2F nor 2I.
'name_test_case_659-manual.html',
// This test expects ::before + title + ::after, which is neither 2F nor 2I.
'name_test_case_660-manual.html',
];
if (browserName === 'firefox') {
// This test contains the following style:
// [data-after]:after { content: attr(data-after); }
// In firefox, content is returned as "attr(data-after)"
// instead of being resolved to the actual value.
skipped.push('name_test_case_553-manual.html');
}
await page.addInitScript(() => {
const self = window as any;
self.setup = () => {};
self.ATTAcomm = class {
constructor(data) {
self.steps = [];
for (const step of data.steps) {
if (!step.test.ATK)
continue;
self.steps.push({ selector: '#' + step.element, name: atk[3] });
for (const atk of step.test.ATK) {
if (atk[0] !== 'property' || atk[1] !== 'name' || atk[2] !== 'is' || typeof atk[3] !== 'string')
continue;
self.steps.push({ selector: '#' + step.element, name: atk[3] });
}
}
}
}
};
});
const testDir = asset('wpt/accname');
const testFiles = fs.readdirSync(testDir, { withFileTypes: true }).filter(e => e.isFile() && e.name.endsWith('.html')).map(e => e.name);
for (const testFile of testFiles) {
if (skipped.includes(testFile))
continue;
await test.step(testFile, async () => {
await page.goto(server.PREFIX + `/wpt/accname/` + testFile);
// Use $eval to force injected script.
const result = await page.$eval('body', () => {
const result = [];
for (const step of (window as any).steps) {
const element = document.querySelector(step.selector);
if (!element)
throw new Error(`Unable to resolve "${step.selector}"`);
const received = (window as any).__injectedScript.getElementAccessibleName(element);
result.push({ selector: step.selector, expected: step.name, received });
}
return result;
});
for (const { selector, expected, received } of result)
expect(received, `checking "${selector}"`).toBe(expected);
};
});
}
});
const testDir = asset('wpt/accname');
const testFiles = fs.readdirSync(testDir, { withFileTypes: true }).filter(e => e.isFile() && e.name.endsWith('.html')).map(e => e.name);
for (const testFile of testFiles) {
if (skipped.includes(testFile))
continue;
const included = (range === 0 || testFile >= ranges[range - 1]) && (range === ranges.length || testFile < ranges[range]);
if (!included)
continue;
await test.step(testFile, async () => {
await page.goto(server.PREFIX + `/wpt/accname/` + testFile);
// Use $eval to force injected script.
const result = await page.$eval('body', () => {
const result = [];
for (const step of (window as any).steps) {
const element = document.querySelector(step.selector);
if (!element)
throw new Error(`Unable to resolve "${step.selector}"`);
const received = (window as any).__injectedScript.getElementAccessibleName(element);
result.push({ selector: step.selector, expected: step.name, received });
}
return result;
});
for (const { selector, expected, received } of result)
expect(received, `checking "${selector}"`).toBe(expected);
});
}
});
}
test('axe-core implicit-role', async ({ page, asset, server }) => {
await page.goto(server.EMPTY_PAGE);

View File

@ -582,7 +582,15 @@ it('should wait for input to be enabled', async ({ page }) => {
});
it('should wait for select to be enabled', async ({ page }) => {
await page.setContent('<select onclick="javascript:window.__CLICKED=true;" disabled><option selected>Hello</option></select>');
await page.setContent(`
<select disabled><option selected>Hello</option></select>
<script>
document.querySelector('select').addEventListener('mousedown', event => {
window.__CLICKED=true;
event.preventDefault();
});
</script>
`);
let done = false;
const clickPromise = page.click('select').then(() => done = true);
await giveItAChanceToClick(page);