From e7f1fd5c5630a81e47c4297cdd32d60ba747c881 Mon Sep 17 00:00:00 2001 From: Max Schmitt Date: Tue, 30 Nov 2021 21:13:41 +0100 Subject: [PATCH] chore: escape CSS selectors in codegen correctly (#10608) --- .../src/server/injected/selectorGenerator.ts | 20 +++++++++---------- tests/selector-generator.spec.ts | 15 ++++++++++++-- 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/packages/playwright-core/src/server/injected/selectorGenerator.ts b/packages/playwright-core/src/server/injected/selectorGenerator.ts index 0db5dddec8..f7a030b301 100644 --- a/packages/playwright-core/src/server/injected/selectorGenerator.ts +++ b/packages/playwright-core/src/server/injected/selectorGenerator.ts @@ -155,26 +155,26 @@ function buildCandidates(injectedScript: InjectedScript, element: Element): Sele if (element.hasAttribute('aria-label')) candidates.push({ engine: 'css', selector: `[aria-label=${quoteString(element.getAttribute('aria-label')!)}]`, score: 10 }); if (element.getAttribute('alt') && ['APPLET', 'AREA', 'IMG', 'INPUT'].includes(element.nodeName)) - candidates.push({ engine: 'css', selector: `${element.nodeName.toLowerCase()}[alt=${quoteString(element.getAttribute('alt')!)}]`, score: 10 }); + candidates.push({ engine: 'css', selector: `${CSS.escape(element.nodeName.toLowerCase())}[alt=${quoteString(element.getAttribute('alt')!)}]`, score: 10 }); if (element.hasAttribute('role')) - candidates.push({ engine: 'css', selector: `${element.nodeName.toLocaleLowerCase()}[role=${quoteString(element.getAttribute('role')!)}]` , score: 50 }); + candidates.push({ engine: 'css', selector: `${CSS.escape(element.nodeName.toLowerCase())}[role=${quoteString(element.getAttribute('role')!)}]` , score: 50 }); if (element.getAttribute('name') && ['BUTTON', 'FORM', 'FIELDSET', 'IFRAME', 'INPUT', 'KEYGEN', 'OBJECT', 'OUTPUT', 'SELECT', 'TEXTAREA', 'MAP', 'META', 'PARAM'].includes(element.nodeName)) - candidates.push({ engine: 'css', selector: `${element.nodeName.toLowerCase()}[name=${quoteString(element.getAttribute('name')!)}]`, score: 50 }); + candidates.push({ engine: 'css', selector: `${CSS.escape(element.nodeName.toLowerCase())}[name=${quoteString(element.getAttribute('name')!)}]`, score: 50 }); if (['INPUT', 'TEXTAREA'].includes(element.nodeName) && element.getAttribute('type') !== 'hidden') { if (element.getAttribute('type')) - candidates.push({ engine: 'css', selector: `${element.nodeName.toLowerCase()}[type=${quoteString(element.getAttribute('type')!)}]`, score: 50 }); + candidates.push({ engine: 'css', selector: `${CSS.escape(element.nodeName.toLowerCase())}[type=${quoteString(element.getAttribute('type')!)}]`, score: 50 }); } if (['INPUT', 'TEXTAREA', 'SELECT'].includes(element.nodeName)) - candidates.push({ engine: 'css', selector: element.nodeName.toLowerCase(), score: 50 }); + candidates.push({ engine: 'css', selector: CSS.escape(element.nodeName.toLowerCase()), score: 50 }); const idAttr = element.getAttribute('id'); if (idAttr && !isGuidLike(idAttr)) candidates.push({ engine: 'css', selector: makeSelectorForId(idAttr), score: 100 }); - candidates.push({ engine: 'css', selector: element.nodeName.toLocaleLowerCase(), score: 200 }); + candidates.push({ engine: 'css', selector: CSS.escape(element.nodeName.toLowerCase()), score: 200 }); return candidates; } @@ -192,7 +192,7 @@ function buildTextCandidates(injectedScript: InjectedScript, element: Element, a candidates.push({ engine: 'text', selector: escaped, score: 10 }); if (allowHasText && escaped === text) { - let prefix = element.nodeName.toLocaleLowerCase(); + let prefix = element.nodeName.toLowerCase(); if (element.hasAttribute('role')) prefix += `[role=${quoteString(element.getAttribute('role')!)}]`; candidates.push({ engine: 'css', selector: `${prefix}:has-text("${text}")`, score: 30 }); @@ -211,7 +211,7 @@ function parentElementOrShadowHost(element: Element): Element | null { } function makeSelectorForId(id: string) { - return /^[a-zA-Z][a-zA-Z0-9\-\_]+$/.test(id) ? '#' + id : `[id="${id}"]`; + return /^[a-zA-Z][a-zA-Z0-9\-\_]+$/.test(id) ? '#' + id : `[id="${CSS.escape(id)}"]`; } function cssFallback(injectedScript: InjectedScript, targetElement: Element): SelectorToken { @@ -263,7 +263,7 @@ function cssFallback(injectedScript: InjectedScript, targetElement: Element): Se if (parent) { const siblings = [...parent.children]; const sameTagSiblings = siblings.filter(sibling => (sibling).nodeName.toLowerCase() === nodeName); - const token = sameTagSiblings.indexOf(element) === 0 ? nodeName : `${nodeName}:nth-child(${1 + siblings.indexOf(element)})`; + const token = sameTagSiblings.indexOf(element) === 0 ? CSS.escape(nodeName) : `${CSS.escape(nodeName)}:nth-child(${1 + siblings.indexOf(element)})`; const selector = uniqueCSSSelector(token); if (selector) return { engine: 'css', selector, score: kFallbackScore }; @@ -282,7 +282,7 @@ function escapeForRegex(text: string): string { } function quoteString(text: string): string { - return `"${text.replace(/"/g, '\\"').replace(/\n/g, '\\n')}"`; + return `"${CSS.escape(text)}"`; } function joinTokens(tokens: SelectorToken[]): string { diff --git a/tests/selector-generator.spec.ts b/tests/selector-generator.spec.ts index 8f44da4277..2ca956144f 100644 --- a/tests/selector-generator.spec.ts +++ b/tests/selector-generator.spec.ts @@ -277,8 +277,19 @@ it.describe('selector generator', () => { } }); - it('should work with tricky ids', async ({ page }) => { + it('should work with tricky attributes', async ({ page }) => { await page.setContent(``); - expect(await generate(page, 'button')).toBe('[id="this:is-my-tricky.id"]'); + expect(await generate(page, 'button')).toBe('[id="this\\:is-my-tricky\\.id"]'); + + await page.setContent(``); + expect(await generate(page, 'ng\\:switch')).toBe('ng\\:switch'); + + await page.setContent(`
`); + await page.$eval('div', div => div.setAttribute('aria-label', `!#'!?:`)); + expect(await generate(page, 'div')).toBe("[aria-label=\"\\!\\#\\'\\!\\?\\:\"]"); + + await page.setContent(`
`); + await page.$eval('div', div => div.id = `!#'!?:`); + expect(await generate(page, 'div')).toBe("[id=\"\\!\\#\\'\\!\\?\\:\"]"); }); });