/**
* Copyright (c) Microsoft Corporation.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { test, expect } from './pageTest';
test.skip(({ mode }) => mode !== 'default', 'Experimental features only work in default mode');
test('should detect roles', async ({ page }) => {
await page.setContent(`
Hello
Heading
Hello
I am a dialog
`);
expect(await page.$$eval(`role=button`, els => els.map(e => e.outerHTML))).toEqual([
`Hello `,
]);
expect(await page.$$eval(`role=listbox`, els => els.map(e => e.outerHTML))).toEqual([
` `,
]);
expect(await page.$$eval(`role=combobox`, els => els.map(e => e.outerHTML))).toEqual([
` `,
]);
expect(await page.$$eval(`role=heading`, els => els.map(e => e.outerHTML))).toEqual([
`Heading `,
]);
expect(await page.$$eval(`role=group`, els => els.map(e => e.outerHTML))).toEqual([
`Hello `,
]);
expect(await page.$$eval(`role=dialog`, els => els.map(e => e.outerHTML))).toEqual([
`I am a dialog
`,
]);
expect(await page.$$eval(`role=menuitem`, els => els.map(e => e.outerHTML))).toEqual([
]);
});
test('should support selected', async ({ page }) => {
await page.setContent(`
Hi
Hello
`);
expect(await page.$$eval(`role=option[selected]`, els => els.map(e => e.outerHTML))).toEqual([
`Hello `,
`Hi
`,
]);
expect(await page.$$eval(`role=option[selected=true]`, els => els.map(e => e.outerHTML))).toEqual([
`Hello `,
`Hi
`,
]);
expect(await page.$$eval(`role=option[selected=false]`, els => els.map(e => e.outerHTML))).toEqual([
`Hi `,
`Hello
`,
]);
});
test('should support checked', async ({ page }) => {
await page.setContent(`
Hi
Hello
Unknown
`);
await page.$eval('[indeterminate]', input => (input as HTMLInputElement).indeterminate = true);
expect(await page.$$eval(`role=checkbox[checked]`, els => els.map(e => e.outerHTML))).toEqual([
` `,
`Hi
`,
]);
expect(await page.$$eval(`role=checkbox[checked=true]`, els => els.map(e => e.outerHTML))).toEqual([
` `,
`Hi
`,
]);
expect(await page.$$eval(`role=checkbox[checked=false]`, els => els.map(e => e.outerHTML))).toEqual([
` `,
`Hello
`,
`Unknown
`,
]);
expect(await page.$$eval(`role=checkbox[checked="mixed"]`, els => els.map(e => e.outerHTML))).toEqual([
` `,
]);
expect(await page.$$eval(`role=checkbox`, els => els.map(e => e.outerHTML))).toEqual([
` `,
` `,
` `,
`Hi
`,
`Hello
`,
`Unknown
`,
]);
});
test('should support pressed', async ({ page }) => {
await page.setContent(`
Hi
Hello
Bye
Mixed
`);
expect(await page.$$eval(`role=button[pressed]`, els => els.map(e => e.outerHTML))).toEqual([
`Hello `,
]);
expect(await page.$$eval(`role=button[pressed=true]`, els => els.map(e => e.outerHTML))).toEqual([
`Hello `,
]);
expect(await page.$$eval(`role=button[pressed=false]`, els => els.map(e => e.outerHTML))).toEqual([
`Hi `,
`Bye `,
]);
expect(await page.$$eval(`role=button[pressed="mixed"]`, els => els.map(e => e.outerHTML))).toEqual([
`Mixed `,
]);
expect(await page.$$eval(`role=button`, els => els.map(e => e.outerHTML))).toEqual([
`Hi `,
`Hello `,
`Bye `,
`Mixed `,
]);
});
test('should support expanded', async ({ page }) => {
await page.setContent(`
Hi
Hello
Bye
`);
expect(await page.$$eval(`role=button[expanded]`, els => els.map(e => e.outerHTML))).toEqual([
`Hello `,
]);
expect(await page.$$eval(`role=button[expanded=true]`, els => els.map(e => e.outerHTML))).toEqual([
`Hello `,
]);
expect(await page.$$eval(`role=button[expanded=false]`, els => els.map(e => e.outerHTML))).toEqual([
`Hi `,
`Bye `,
]);
});
test('should support disabled', async ({ page }) => {
await page.setContent(`
Hi
Bye
Hello
Oh
Yay
`);
expect(await page.$$eval(`role=button[disabled]`, els => els.map(e => e.outerHTML))).toEqual([
`Bye `,
`Hello `,
`Yay `,
]);
expect(await page.$$eval(`role=button[disabled=true]`, els => els.map(e => e.outerHTML))).toEqual([
`Bye `,
`Hello `,
`Yay `,
]);
expect(await page.$$eval(`role=button[disabled=false]`, els => els.map(e => e.outerHTML))).toEqual([
`Hi `,
`Oh `,
]);
});
test('should support level', async ({ page }) => {
await page.setContent(`
Hello
Hi
Bye
`);
expect(await page.$$eval(`role=heading[level=1]`, els => els.map(e => e.outerHTML))).toEqual([
`Hello `,
]);
expect(await page.$$eval(`role=heading[level=3]`, els => els.map(e => e.outerHTML))).toEqual([
`Hi `,
]);
expect(await page.$$eval(`role=heading[level=5]`, els => els.map(e => e.outerHTML))).toEqual([
`Bye
`,
]);
});
test('should filter hidden, unless explicitly asked for', async ({ page }) => {
await page.setContent(`
Hi
Hello
Yay
Nay
Bye
Oh
Still here
Never
`);
expect(await page.$$eval(`role=button`, els => els.map(e => e.outerHTML))).toEqual([
`Hi `,
`Nay `,
`Still here `,
`Shadow1 `,
]);
expect(await page.$$eval(`role=button[include-hidden]`, els => els.map(e => e.outerHTML))).toEqual([
`Hi `,
`Hello `,
`Yay `,
`Nay `,
`Bye `,
`Oh `,
`Still here `,
`Never `,
`Shadow1 `,
`Shadow2 `,
]);
expect(await page.$$eval(`role=button[include-hidden=true]`, els => els.map(e => e.outerHTML))).toEqual([
`Hi `,
`Hello `,
`Yay `,
`Nay `,
`Bye `,
`Oh `,
`Still here `,
`Never `,
`Shadow1 `,
`Shadow2 `,
]);
expect(await page.$$eval(`role=button[include-hidden=false]`, els => els.map(e => e.outerHTML))).toEqual([
`Hi `,
`Nay `,
`Still here `,
`Shadow1 `,
]);
});
test('should support name', async ({ page }) => {
await page.setContent(`
`);
expect(await page.$$eval(`role=button[name="Hello"]`, els => els.map(e => e.outerHTML))).toEqual([
`
`,
]);
expect(await page.$$eval(`role=button[name*="all"]`, els => els.map(e => e.outerHTML))).toEqual([
`
`,
]);
expect(await page.$$eval(`role=button[name=/^H[ae]llo$/]`, els => els.map(e => e.outerHTML))).toEqual([
`
`,
`
`,
]);
expect(await page.$$eval(`role=button[name=/h.*o/i]`, els => els.map(e => e.outerHTML))).toEqual([
`
`,
`
`,
]);
expect(await page.$$eval(`role=button[name="Hello"][include-hidden]`, els => els.map(e => e.outerHTML))).toEqual([
`
`,
`
`,
]);
expect(await page.$$eval(`role=button[name=Hello]`, els => els.map(e => e.outerHTML))).toEqual([
`
`,
]);
expect(await page.$$eval(`role=button[name=123][include-hidden]`, els => els.map(e => e.outerHTML))).toEqual([
`
`,
]);
});
test('errors', async ({ page }) => {
const e0 = await page.$('role=[bar]').catch(e => e);
expect(e0.message).toContain(`Role must not be empty`);
const e1 = await page.$('role=foo[sElected]').catch(e => e);
expect(e1.message).toContain(`Unknown attribute "sElected", must be one of "checked", "disabled", "expanded", "include-hidden", "level", "name", "pressed", "selected"`);
const e2 = await page.$('role=foo[bar . qux=true]').catch(e => e);
expect(e2.message).toContain(`Unknown attribute "bar.qux"`);
const e3 = await page.$('role=heading[level="bar"]').catch(e => e);
expect(e3.message).toContain(`"level" attribute must be compared to a number`);
const e4 = await page.$('role=checkbox[checked="bar"]').catch(e => e);
expect(e4.message).toContain(`"checked" must be one of true, false, "mixed"`);
const e5 = await page.$('role=checkbox[checked~=true]').catch(e => e);
expect(e5.message).toContain(`cannot use ~= in attribute with non-string matching value`);
const e6 = await page.$('role=button[level=3]').catch(e => e);
expect(e6.message).toContain(`"level" attribute is only supported for roles: "heading", "listitem", "row", "treeitem"`);
const e7 = await page.$('role=button[name]').catch(e => e);
expect(e7.message).toContain(`"name" attribute must have a value`);
});