mirror of
https://github.com/microsoft/playwright.git
synced 2025-06-26 21:40:17 +00:00
fix: join individual css selectors by > in cssFallback (#13712)
This commit is contained in:
parent
5e51c17d41
commit
aab1a746d3
@ -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;
|
||||
|
@ -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 }) => {
|
||||
|
@ -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)');
|
||||
});
|
||||
|
Loading…
x
Reference in New Issue
Block a user