/** * 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(`

Heading

Hello
I am a dialog
`); expect(await page.$$eval(`role=button`, els => els.map(e => e.outerHTML))).toEqual([ ``, ]); 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([ ``, `
Hi
`, ]); expect(await page.$$eval(`role=option[selected=true]`, els => els.map(e => e.outerHTML))).toEqual([ ``, `
Hi
`, ]); expect(await page.$$eval(`role=option[selected=false]`, els => els.map(e => e.outerHTML))).toEqual([ ``, `
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(` `); expect(await page.$$eval(`role=button[pressed]`, els => els.map(e => e.outerHTML))).toEqual([ ``, ]); expect(await page.$$eval(`role=button[pressed=true]`, els => els.map(e => e.outerHTML))).toEqual([ ``, ]); expect(await page.$$eval(`role=button[pressed=false]`, els => els.map(e => e.outerHTML))).toEqual([ ``, ``, ]); expect(await page.$$eval(`role=button[pressed="mixed"]`, els => els.map(e => e.outerHTML))).toEqual([ ``, ]); expect(await page.$$eval(`role=button`, els => els.map(e => e.outerHTML))).toEqual([ ``, ``, ``, ``, ]); }); test('should support expanded', async ({ page }) => { await page.setContent(` `); expect(await page.$$eval(`role=button[expanded]`, els => els.map(e => e.outerHTML))).toEqual([ ``, ]); expect(await page.$$eval(`role=button[expanded=true]`, els => els.map(e => e.outerHTML))).toEqual([ ``, ]); expect(await page.$$eval(`role=button[expanded=false]`, els => els.map(e => e.outerHTML))).toEqual([ ``, ``, ]); }); test('should support disabled', async ({ page }) => { await page.setContent(`
`); expect(await page.$$eval(`role=button[disabled]`, els => els.map(e => e.outerHTML))).toEqual([ ``, ``, ``, ]); expect(await page.$$eval(`role=button[disabled=true]`, els => els.map(e => e.outerHTML))).toEqual([ ``, ``, ``, ]); expect(await page.$$eval(`role=button[disabled=false]`, els => els.map(e => e.outerHTML))).toEqual([ ``, ``, ]); }); 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(`
`); expect(await page.$$eval(`role=button`, els => els.map(e => e.outerHTML))).toEqual([ ``, ``, ``, ``, ]); expect(await page.$$eval(`role=button[include-hidden]`, els => els.map(e => e.outerHTML))).toEqual([ ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ]); expect(await page.$$eval(`role=button[include-hidden=true]`, els => els.map(e => e.outerHTML))).toEqual([ ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ]); expect(await page.$$eval(`role=button[include-hidden=false]`, els => els.map(e => e.outerHTML))).toEqual([ ``, ``, ``, ``, ]); }); 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`); });