fix: join individual css selectors by > in cssFallback (#13712)

This commit is contained in:
Yury Semikhatsky 2022-04-25 11:11:24 -07:00 committed by GitHub
parent 5e51c17d41
commit aab1a746d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 2 deletions

View File

@ -224,7 +224,7 @@ function cssFallback(injectedScript: InjectedScript, targetElement: Element, str
const path = tokens.slice();
if (prefix)
path.unshift(prefix);
const selector = path.join(' ');
const selector = path.join(' > ');
const parsedSelector = injectedScript.parseSelector(selector);
const node = injectedScript.querySelector(parsedSelector, targetElement.ownerDocument, false);
return node === targetElement ? selector : undefined;

View File

@ -191,7 +191,28 @@ it.describe('selector generator', () => {
</a>
<a><b></b></a>
`);
expect(await generate(page, 'c[mark="1"]')).toBe('b:nth-child(2) c');
expect(await generate(page, 'c[mark="1"]')).toBe('b:nth-child(2) > c');
});
it('should properly join child selectors under nested ordinals', async ({ page }) => {
await page.setContent(`
<a><c></c><c></c><c></c><c></c><c></c><b></b></a>
<a>
<b>
<div>
<c>
</c>
</div>
</b>
<b>
<div>
<c mark=1></c>
</div>
</b>
</a>
<a><b></b></a>
`);
expect(await generate(page, 'c[mark="1"]')).toBe('b:nth-child(2) > div > c');
});
it('should not use input[value]', async ({ page }) => {

View File

@ -57,3 +57,30 @@ it('should fail page.dispatchEvent in strict mode', async ({ page }) => {
expect(error.message).toContain('1) <span></span> aka playwright.$("span >> nth=0")');
expect(error.message).toContain('2) <span></span> aka playwright.$("div span")');
});
it('should properly format :nth-child() in strict mode message', async ({ page }) => {
await page.setContent(`
<div>
<div>
</div>
<div>
<div>
</div>
<div>
</div>
</div>
</div>
<div>
<div class='foo'>
</div>
<div class='foo'>
</div>
</div>
`);
const error = await page.locator('.foo').hover().catch(e => e);
console.log(error.message);
expect(error.message).toContain('strict mode violation');
// Second div has body > div:nth-child(2) > div:nth-child(2) selector which would be ambiguous
// if '>' were ' '.
expect(error.message).toContain('body > div:nth-child(2) > div:nth-child(2)');
});