playwright/tests/page/selectors-get-by.spec.ts

229 lines
11 KiB
TypeScript
Raw Normal View History

/**
* Copyright (c) Microsoft Corporation. All rights reserved.
*
* 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 as it, expect } from './pageTest';
it('getByTestId should work', async ({ page }) => {
await page.setContent('<div><div data-testid="Hello">Hello world</div></div>');
await expect(page.getByTestId('Hello')).toHaveText('Hello world');
await expect(page.mainFrame().getByTestId('Hello')).toHaveText('Hello world');
await expect(page.locator('div').getByTestId('Hello')).toHaveText('Hello world');
});
it('getByTestId with custom testId should work', async ({ page, playwright }) => {
await page.setContent('<div><div data-my-custom-testid="Hello">Hello world</div></div>');
playwright.selectors.setTestIdAttribute('data-my-custom-testid');
await expect(page.getByTestId('Hello')).toHaveText('Hello world');
await expect(page.mainFrame().getByTestId('Hello')).toHaveText('Hello world');
await expect(page.locator('div').getByTestId('Hello')).toHaveText('Hello world');
});
it('getByTestId should escape id', async ({ page }) => {
await page.setContent(`<div><div data-testid='He"llo'>Hello world</div></div>`);
await expect(page.getByTestId('He"llo')).toHaveText('Hello world');
});
it('getByTestId should work for regex', async ({ page }) => {
await page.setContent('<div><div data-testid="Hello">Hello world</div></div>');
await expect(page.getByTestId(/He[l]*o/)).toHaveText('Hello world');
await expect(page.mainFrame().getByTestId('Hello')).toHaveText('Hello world');
await expect(page.locator('div').getByTestId('Hello')).toHaveText('Hello world');
});
it('getByText should work', async ({ page }) => {
await page.setContent(`<div>yo</div><div>ya</div><div>\nye </div>`);
expect(await page.getByText('ye').evaluate(e => e.outerHTML)).toContain('>\nye </div>');
expect(await page.getByText(/ye/).evaluate(e => e.outerHTML)).toContain('>\nye </div>');
expect(await page.getByText(/e/).evaluate(e => e.outerHTML)).toContain('>\nye </div>');
await page.setContent(`<div> ye </div><div>ye</div>`);
expect(await page.getByText('ye', { exact: true }).first().evaluate(e => e.outerHTML)).toContain('> ye </div>');
await page.setContent(`<div>Hello world</div><div>Hello</div>`);
expect(await page.getByText('Hello', { exact: true }).evaluate(e => e.outerHTML)).toContain('>Hello</div>');
});
it('getByLabel should work', async ({ page }) => {
await page.setContent(`<div><label for=target>Name</label><input id=target type=text></div>`);
expect(await page.getByText('Name').evaluate(e => e.nodeName)).toBe('LABEL');
expect(await page.getByLabel('Name').evaluate(e => e.nodeName)).toBe('INPUT');
expect(await page.mainFrame().getByLabel('Name').evaluate(e => e.nodeName)).toBe('INPUT');
expect(await page.locator('div').getByLabel('Name').evaluate(e => e.nodeName)).toBe('INPUT');
});
it('getByLabel should work with nested elements', async ({ page }) => {
await page.setContent(`<label for=target>Last <span>Name</span></label><input id=target type=text>`);
await expect(page.getByLabel('last name')).toHaveAttribute('id', 'target');
await expect(page.getByLabel('st na')).toHaveAttribute('id', 'target');
await expect(page.getByLabel('Name')).toHaveAttribute('id', 'target');
await expect(page.getByLabel('Last Name', { exact: true })).toHaveAttribute('id', 'target');
await expect(page.getByLabel(/Last\s+name/i)).toHaveAttribute('id', 'target');
expect(await page.getByLabel('Last', { exact: true }).elementHandles()).toEqual([]);
expect(await page.getByLabel('last name', { exact: true }).elementHandles()).toEqual([]);
expect(await page.getByLabel('Name', { exact: true }).elementHandles()).toEqual([]);
expect(await page.getByLabel('what?').elementHandles()).toEqual([]);
expect(await page.getByLabel(/last name/).elementHandles()).toEqual([]);
});
it('getByLabel should work with multiply-labelled input', async ({ page }) => {
await page.setContent(`<label for=target>Name</label><input id=target type=text><label for=target>First or Last</label>`);
expect(await page.getByLabel('Name').evaluate(e => e.id)).toBe('target');
expect(await page.getByLabel('First or Last').evaluate(e => e.id)).toBe('target');
});
it('getByLabel should work with ancestor label and multiple controls', async ({ page }) => {
await page.setContent(`<label>Name<button id=target>Click me</button><input type=text></label>`);
expect(await page.getByLabel('Name').evaluate(e => e.id)).toBe('target');
});
it('getByLabel should work with ancestor label and for', async ({ page }) => {
await page.setContent(`
<label for=target>Name<input type=text id=nontarget></label>
<input type=text id=target>
`);
expect(await page.getByLabel('Name').evaluate(e => e.id)).toBe('target');
});
it('getByLabel should work with aria-labelledby', async ({ page }) => {
await page.setContent(`<label id=name-label>Name</label><button aria-labelledby=name-label>Click me</button>`);
expect(await page.getByLabel('Name').evaluate(e => e.textContent)).toBe('Click me');
});
it('getByLabel should prioritize aria-labelledby over native label', async ({ page }) => {
await page.setContent(`
<label id=name-label>Name</label>
<label>Wrong<button aria-labelledby=name-label>Click me</button></label>
`);
expect(await page.getByLabel('Name').evaluate(e => e.textContent)).toBe('Click me');
});
it('getByLabel should work with aria-label', async ({ page }) => {
await page.setContent(`<input id=target aria-label="Name">`);
expect(await page.getByLabel('Name').evaluate(e => e.id)).toBe('target');
});
it('getByLabel should prioritize aria-labelledby over aria-label', async ({ page }) => {
await page.setContent(`<label id=other-label>Other</label><input id=target aria-label="Name" aria-labelledby=other-label>`);
expect(await page.getByLabel('Other').evaluate(e => e.id)).toBe('target');
});
it('getByPlaceholder should work', async ({ page }) => {
await page.setContent(`<div>
<input placeholder='Hello'>
<input placeholder='Hello World'>
</div>`);
await expect(page.getByPlaceholder('hello')).toHaveCount(2);
await expect(page.getByPlaceholder('Hello', { exact: true })).toHaveCount(1);
await expect(page.getByPlaceholder(/wor/i)).toHaveCount(1);
// Coverage
await expect(page.mainFrame().getByPlaceholder('hello')).toHaveCount(2);
await expect(page.locator('div').getByPlaceholder('hello')).toHaveCount(2);
});
it('getByAltText should work', async ({ page }) => {
await page.setContent(`<div>
<input alt='Hello'>
<input alt='Hello World'>
</div>`);
await expect(page.getByAltText('hello')).toHaveCount(2);
await expect(page.getByAltText('Hello', { exact: true })).toHaveCount(1);
await expect(page.getByAltText(/wor/i)).toHaveCount(1);
// Coverage
await expect(page.mainFrame().getByAltText('hello')).toHaveCount(2);
await expect(page.locator('div').getByAltText('hello')).toHaveCount(2);
});
it('getByTitle should work', async ({ page }) => {
await page.setContent(`<div>
<input title='Hello'>
<input title='Hello World'>
</div>`);
await expect(page.getByTitle('hello')).toHaveCount(2);
await expect(page.getByTitle('Hello', { exact: true })).toHaveCount(1);
await expect(page.getByTitle(/wor/i)).toHaveCount(1);
// Coverage
await expect(page.mainFrame().getByTitle('hello')).toHaveCount(2);
await expect(page.locator('div').getByTitle('hello')).toHaveCount(2);
});
it('getBy escaping', async ({ page }) => {
await page.setContent(`<label id=label for=control>Hello my
wo"rld</label><input id=control />`);
await page.$eval('input', input => {
input.setAttribute('placeholder', 'hello my\nwo"rld');
input.setAttribute('title', 'hello my\nwo"rld');
input.setAttribute('alt', 'hello my\nwo"rld');
});
await expect(page.getByText('hello my\nwo"rld')).toHaveAttribute('id', 'label');
await expect(page.getByText('hello my wo"rld')).toHaveAttribute('id', 'label');
await expect(page.getByLabel('hello my\nwo"rld')).toHaveAttribute('id', 'control');
await expect(page.getByPlaceholder('hello my\nwo"rld')).toHaveAttribute('id', 'control');
await expect(page.getByAltText('hello my\nwo"rld')).toHaveAttribute('id', 'control');
await expect(page.getByTitle('hello my\nwo"rld')).toHaveAttribute('id', 'control');
await page.setContent(`<label id=label for=control>Hello my
world</label><input id=control />`);
await page.$eval('input', input => {
input.setAttribute('placeholder', 'hello my\nworld');
input.setAttribute('title', 'hello my\nworld');
input.setAttribute('alt', 'hello my\nworld');
});
await expect(page.getByText('hello my\nworld')).toHaveAttribute('id', 'label');
await expect(page.getByText('hello my world')).toHaveAttribute('id', 'label');
await expect(page.getByLabel('hello my\nworld')).toHaveAttribute('id', 'control');
await expect(page.getByPlaceholder('hello my\nworld')).toHaveAttribute('id', 'control');
await expect(page.getByAltText('hello my\nworld')).toHaveAttribute('id', 'control');
await expect(page.getByTitle('hello my\nworld')).toHaveAttribute('id', 'control');
});
it('getByRole escaping', async ({ page }) => {
await page.setContent(`
<a href="https://playwright.dev">issues 123</a>
<a href="https://playwright.dev">he llo 56</a>
<button>Click me</button>
`);
expect.soft(await page.getByRole('button').evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
`<button>Click me</button>`,
]);
expect.soft(await page.getByRole('link').evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
`<a href="https://playwright.dev">issues 123</a>`,
`<a href="https://playwright.dev">he llo 56</a>`,
]);
expect.soft(await page.getByRole('link', { name: 'issues 123' }).evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
`<a href="https://playwright.dev">issues 123</a>`,
]);
expect.soft(await page.getByRole('link', { name: 'sues' }).evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
`<a href="https://playwright.dev">issues 123</a>`,
]);
expect.soft(await page.getByRole('link', { name: ' he \n llo ' }).evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
`<a href="https://playwright.dev">he llo 56</a>`,
]);
expect.soft(await page.getByRole('button', { name: 'issues' }).evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
]);
expect.soft(await page.getByRole('link', { name: 'sues', exact: true }).evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
]);
expect.soft(await page.getByRole('link', { name: ' he \n llo 56 ', exact: true }).evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
`<a href="https://playwright.dev">he llo 56</a>`,
]);
});