Skip to content

Commit

Permalink
chore: prioritize role over label and placeholder (#33970)
Browse files Browse the repository at this point in the history
  • Loading branch information
pavelfeldman authored Dec 12, 2024
1 parent e3629dc commit 0e2b984
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 34 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@ const kOtherTestIdScore = 2; // other data-test* attributes
const kIframeByAttributeScore = 10;

const kBeginPenalizedScore = 50;
const kPlaceholderScore = 100;
const kLabelScore = 120;
const kRoleWithNameScore = 140;
const kRoleWithNameScore = 100;
const kPlaceholderScore = 120;
const kLabelScore = 140;
const kAltTextScore = 160;
const kTextScore = 180;
const kTitleScore = 200;
Expand Down
36 changes: 18 additions & 18 deletions tests/library/inspector/cli-codegen-3.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -472,27 +472,27 @@ await page.GetByTestId("testid").ClickAsync();`);
await recorder.setContentAndWait(`<input placeholder="Country"></input>`);

const locator = await recorder.hoverOverElement('input');
expect(locator).toBe(`getByPlaceholder('Country')`);
expect(locator).toBe(`getByRole('textbox', { name: 'Country' })`);

const [sources] = await Promise.all([
recorder.waitForOutput('JavaScript', 'click'),
recorder.trustedClick(),
]);

expect.soft(sources.get('JavaScript')!.text).toContain(`
await page.getByPlaceholder('Country').click();`);
await page.getByRole('textbox', { name: 'Country' }).click();`);

expect.soft(sources.get('Python')!.text).toContain(`
page.get_by_placeholder("Country").click()`);
page.get_by_role("textbox", name="Country").click()`);

expect.soft(sources.get('Python Async')!.text).toContain(`
await page.get_by_placeholder("Country").click()`);
await page.get_by_role("textbox", name="Country").click()`);

expect.soft(sources.get('Java')!.text).toContain(`
page.getByPlaceholder("Country").click()`);
page.getByRole(AriaRole.TEXTBOX, new Page.GetByRoleOptions().setName("Country")).click()`);

expect.soft(sources.get('C#')!.text).toContain(`
await page.GetByPlaceholder("Country").ClickAsync();`);
await page.GetByRole(AriaRole.Textbox, new() { Name = "Country" }).ClickAsync();`);
});

test('should generate getByAltText', async ({ openRecorder }) => {
Expand Down Expand Up @@ -530,27 +530,27 @@ await page.GetByAltText("Country").ClickAsync();`);
await recorder.setContentAndWait(`<label for=target>Country</label><input id=target>`);

const locator = await recorder.hoverOverElement('input');
expect(locator).toBe(`getByLabel('Country')`);
expect(locator).toBe(`getByRole('textbox', { name: 'Country' })`);

const [sources] = await Promise.all([
recorder.waitForOutput('JavaScript', 'click'),
recorder.trustedClick(),
]);

expect.soft(sources.get('JavaScript')!.text).toContain(`
await page.getByLabel('Country').click();`);
await page.getByRole('textbox', { name: 'Country' }).click();`);

expect.soft(sources.get('Python')!.text).toContain(`
page.get_by_label("Country").click()`);
page.get_by_role("textbox", name="Country").click()`);

expect.soft(sources.get('Python Async')!.text).toContain(`
await page.get_by_label("Country").click()`);
await page.get_by_role("textbox", name="Country").click()`);

expect.soft(sources.get('Java')!.text).toContain(`
page.getByLabel("Country").click()`);
page.getByRole(AriaRole.TEXTBOX, new Page.GetByRoleOptions().setName("Country")).click()`);

expect.soft(sources.get('C#')!.text).toContain(`
await page.GetByLabel("Country").ClickAsync();`);
await page.GetByRole(AriaRole.Textbox, new() { Name = "Country" }).ClickAsync();`);
});

test('should generate getByLabel without regex', async ({ openRecorder }) => {
Expand All @@ -559,27 +559,27 @@ await page.GetByLabel("Country").ClickAsync();`);
await recorder.setContentAndWait(`<label for=target>Coun"try</label><input id=target>`);

const locator = await recorder.hoverOverElement('input');
expect(locator).toBe(`getByLabel('Coun"try')`);
expect(locator).toBe(`getByRole('textbox', { name: 'Coun"try' })`);

const [sources] = await Promise.all([
recorder.waitForOutput('JavaScript', 'click'),
recorder.trustedClick(),
]);

expect.soft(sources.get('JavaScript')!.text).toContain(`
await page.getByLabel('Coun\"try').click();`);
await page.getByRole('textbox', { name: 'Coun\"try' }).click();`);

expect.soft(sources.get('Python')!.text).toContain(`
page.get_by_label("Coun\\"try").click()`);
page.get_by_role("textbox", name="Coun\\"try").click()`);

expect.soft(sources.get('Python Async')!.text).toContain(`
await page.get_by_label("Coun\\"try").click()`);
await page.get_by_role("textbox", name="Coun\\"try").click()`);

expect.soft(sources.get('Java')!.text).toContain(`
page.getByLabel("Coun\\"try").click()`);
page.getByRole(AriaRole.TEXTBOX, new Page.GetByRoleOptions().setName(\"Coun\\\"try\")).click();`);

expect.soft(sources.get('C#')!.text).toContain(`
await page.GetByLabel("Coun\\"try").ClickAsync();`);
await page.GetByRole(AriaRole.Textbox, new() { Name = \"Coun\\\"try\" }).ClickAsync();`);
});

test('should consume pointer events', async ({ openRecorder }) => {
Expand Down
26 changes: 13 additions & 13 deletions tests/library/selector-generator.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ it.describe('selector generator', () => {

it('should not escape spaces inside named attr selectors', async ({ page }) => {
await page.setContent(`<input placeholder="Foo b ar"/>`);
expect(await generate(page, 'input')).toBe('internal:attr=[placeholder=\"Foo b ar\"i]');
expect(await generate(page, 'input')).toBe('internal:role=textbox[name=\"Foo b ar\"i]');
});

it('should generate text for <input type=button>', async ({ page }) => {
Expand Down Expand Up @@ -91,7 +91,7 @@ it.describe('selector generator', () => {

it('should try to improve label text by shortening', async ({ page }) => {
await page.setContent(`<label>Longest verbose description of the item<input></label>`);
expect(await generate(page, 'input')).toBe('internal:label="Longest verbose description"i');
expect(await generate(page, 'input')).toBe('internal:role=textbox[name=\"Longest verbose description\"i]');
});

it('should not improve guid text', async ({ page }) => {
Expand Down Expand Up @@ -316,7 +316,7 @@ it.describe('selector generator', () => {
});
it('placeholder', async ({ page }) => {
await page.setContent(`<input placeholder="foobar" type="text"/>`);
expect(await generate(page, 'input')).toBe('internal:attr=[placeholder=\"foobar\"i]');
expect(await generate(page, 'input')).toBe('internal:role=textbox[name=\"foobar\"i]');
});
it('name', async ({ page }) => {
await page.setContent(`
Expand Down Expand Up @@ -437,7 +437,7 @@ it.describe('selector generator', () => {

it('should accept valid aria-label for candidate consideration', async ({ page }) => {
await page.setContent(`<button aria-label="ariaLabel" id="buttonId"></button>`);
expect(await generate(page, 'button')).toBe('internal:label="ariaLabel"i');
expect(await generate(page, 'button')).toBe('internal:role=button[name=\"ariaLabel\"i]');
});

it('should ignore empty role for candidate consideration', async ({ page }) => {
Expand Down Expand Up @@ -469,15 +469,15 @@ it.describe('selector generator', () => {
<label for=target5>Target5</label><input id=target5 type=hidden>
<label for=target6>Target6</label><div id=target6>text</div>
`);
expect(await generate(page, '#target1')).toBe('internal:label="Target1"i');
expect(await generate(page, '#target2')).toBe('internal:label="Target2"i');
expect(await generate(page, '#target3')).toBe('internal:label="Target3"i');
expect(await generate(page, '#target4')).toBe('internal:label="Target4"i');
expect(await generate(page, '#target5')).toBe('#target5');
expect(await generate(page, '#target6')).toBe('internal:text="text"i');
expect.soft(await generate(page, '#target1')).toBe('internal:role=textbox[name=\"Target1\"i]');
expect.soft(await generate(page, '#target2')).toBe('internal:role=button[name=\"Target2\"i]');
expect.soft(await generate(page, '#target3')).toBe('internal:label=\"Target3\"i');
expect.soft(await generate(page, '#target4')).toBe('internal:label=\"Target4\"i');
expect.soft(await generate(page, '#target5')).toBe('#target5');
expect.soft(await generate(page, '#target6')).toBe('internal:text="text"i');

await page.setContent(`<label for=target>Coun"try</label><input id=target>`);
expect(await generate(page, 'input')).toBe('internal:label="Coun\\\"try"i');
expect(await generate(page, 'input')).toBe('internal:role=textbox[name=\"Coun\\\"try\"i]');
});

it('should prefer role other input[type]', async ({ page }) => {
Expand Down Expand Up @@ -514,7 +514,7 @@ it.describe('selector generator', () => {
<input placeholder="Text"></input>
<input placeholder="Text and more"></input>
`);
expect(await generate(page, 'input')).toBe('internal:attr=[placeholder=\"Text\"s]');
expect(await generate(page, 'input')).toBe('internal:role=textbox[name=\"Text\"s]');
});

it('should generate exact role when necessary', async ({ page }) => {
Expand All @@ -530,7 +530,7 @@ it.describe('selector generator', () => {
<label>Text <input></input></label>
<label>Text and more <input></input></label>
`);
expect(await generate(page, 'input')).toBe('internal:label=\"Text\"s');
expect(await generate(page, 'input')).toBe('internal:role=textbox[name=\"Text\"s]');
});

it('should generate relative selector', async ({ page }) => {
Expand Down

0 comments on commit 0e2b984

Please sign in to comment.