From 2a85806cc0a903f676036af7f5fab603ac45205e Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Wed, 28 Sep 2022 08:23:47 -0800
Subject: [PATCH] chore: follow up to getTestById, escape it (#17650)

---
 packages/playwright-core/src/client/locator.ts | 2 +-
 tests/page/selectors-css.spec.ts               | 5 +++++
 tests/page/selectors-role.spec.ts              | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/playwright-core/src/client/locator.ts b/packages/playwright-core/src/client/locator.ts
index 217686f93b..e51804a17d 100644
--- a/packages/playwright-core/src/client/locator.ts
+++ b/packages/playwright-core/src/client/locator.ts
@@ -52,7 +52,7 @@ export class Locator implements api.Locator {
   }
 
   static getByTestIdSelector(testId: string): string {
-    return `css=[${Locator._testIdAttributeName}=${testId}]`;
+    return `css=[${Locator._testIdAttributeName}=${JSON.stringify(testId)}]`;
   }
 
   static getByTextSelector(text: string | RegExp, options?: { exact?: boolean }): string {
diff --git a/tests/page/selectors-css.spec.ts b/tests/page/selectors-css.spec.ts
index c9bf2915ef..f3ca8afbcc 100644
--- a/tests/page/selectors-css.spec.ts
+++ b/tests/page/selectors-css.spec.ts
@@ -420,3 +420,8 @@ it('getByTestId should work', async ({ page }) => {
   await expect(page.mainFrame().getByTestId('Hello')).toHaveText('Hello world');
   await expect(page.get('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');
+});
diff --git a/tests/page/selectors-role.spec.ts b/tests/page/selectors-role.spec.ts
index bd79fa2d61..af9a27c26f 100644
--- a/tests/page/selectors-role.spec.ts
+++ b/tests/page/selectors-role.spec.ts
@@ -321,7 +321,7 @@ test('should support name', async ({ page }) => {
     <div role="button" aria-label="Hallo"></div>
     <div role="button" aria-label="Hello" aria-hidden="true"></div>
     <div role="button" aria-label="123" aria-hidden="true"></div>
-    <div role="button" aria-label="foo\"bar" aria-hidden="true"></div>
+    <div role="button" aria-label='foo"bar' aria-hidden="true"></div>
   `);
   expect(await page.get(`role=button[name="Hello"]`).evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
     `<div role="button" aria-label="Hello"></div>`,