참고소스 수정본

참고/playwright-main/tests/library/inspector/cli-codegen-aria.spec.ts

@@ -0,0 +1,185 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { test, expect } from './inspectorTest';
+import { roundBox } from '../../config/utils';
+
+test.describe(() => {
+  test('should generate aria snapshot', async ({ openRecorder }) => {
+    const { recorder } = await openRecorder();
+    await recorder.setContentAndWait(`<main><button>Submit</button></main>`);
+
+    await recorder.page.click('x-pw-tool-item.snapshot');
+    await recorder.page.hover('button');
+    await recorder.trustedClick();
+
+    await expect.poll(() =>
+      recorder.text('JavaScript')).toContain(`await expect(page.getByRole('button')).toMatchAriaSnapshot(\`- button "Submit"\`);`);
+    await expect.poll(() =>
+      recorder.text('Python')).toContain(`expect(page.get_by_role("button")).to_match_aria_snapshot("- button \\"Submit\\"")`);
+    await expect.poll(() =>
+      recorder.text('Python Async')).toContain(`await expect(page.get_by_role(\"button\")).to_match_aria_snapshot("- button \\"Submit\\"")`);
+    await expect.poll(() =>
+      recorder.text('Java')).toContain(`assertThat(page.getByRole(AriaRole.BUTTON)).matchesAriaSnapshot("- button \\"Submit\\"");`);
+    await expect.poll(() =>
+      recorder.text('C#')).toContain(`await Expect(page.GetByRole(AriaRole.Button)).ToMatchAriaSnapshotAsync("- button \\"Submit\\"");`);
+  });
+
+  test('should generate regex in aria snapshot', async ({ openRecorder }) => {
+    const { recorder } = await openRecorder();
+    await recorder.setContentAndWait(`<main><button>Submit 123</button></main>`);
+
+    await recorder.page.click('x-pw-tool-item.snapshot');
+    await recorder.page.hover('button');
+    await recorder.trustedClick();
+
+    await expect.poll(() =>
+      recorder.text('JavaScript')).toContain(`await expect(page.getByRole('button')).toMatchAriaSnapshot(\`- button /Submit \\\\d+/\`);`);
+    await expect.poll(() =>
+      recorder.text('Python')).toContain(`expect(page.get_by_role("button")).to_match_aria_snapshot("- button /Submit \\\\d+/")`);
+    await expect.poll(() =>
+      recorder.text('Python Async')).toContain(`await expect(page.get_by_role(\"button\")).to_match_aria_snapshot("- button /Submit \\\\d+/")`);
+    await expect.poll(() =>
+      recorder.text('Java')).toContain(`assertThat(page.getByRole(AriaRole.BUTTON)).matchesAriaSnapshot("- button /Submit \\\\d+/");`);
+    await expect.poll(() =>
+      recorder.text('C#')).toContain(`await Expect(page.GetByRole(AriaRole.Button)).ToMatchAriaSnapshotAsync("- button /Submit \\\\d+/");`);
+  });
+
+  test('should generate regex for uuid in aria snapshot', async ({ openRecorder }) => {
+    const { recorder } = await openRecorder();
+    await recorder.setContentAndWait(`<main><a href="/items/550e8400-e29b-41d4-a716-446655440000">Item 550e8400-e29b-41d4-a716-446655440000</a></main>`);
+
+    await recorder.page.click('x-pw-tool-item.snapshot');
+    await recorder.page.hover('a');
+    await recorder.trustedClick();
+
+    // url still contains full UUID, we can improve here.
+    await expect.poll(() =>
+      recorder.text('JavaScript')).toContain(`- link /Item [0-9a-fA-F-]+/:`);
+  });
+
+  test('should inspect aria snapshot', async ({ openRecorder }) => {
+    const { recorder } = await openRecorder();
+    await recorder.setContentAndWait(`<main><button>Submit</button></main>`);
+    await recorder.page.click('x-pw-tool-item.pick-locator');
+    await recorder.page.hover('button');
+    await recorder.trustedClick();
+    await recorder.recorderPage.getByRole('tab', { name: 'Aria' }).click();
+    await expect(recorder.recorderPage.locator('.tab-aria .CodeMirror')).toMatchAriaSnapshot(`
+      - textbox
+      - text: '- button "Submit"'
+    `);
+  });
+
+  test('should update aria snapshot highlight', async ({ openRecorder }) => {
+    const { recorder } = await openRecorder();
+    await recorder.setContentAndWait(`<main>
+      <button>Submit</button>
+      <button>Cancel</button>
+    </main>`);
+
+    const submitButton = recorder.page.getByRole('button', { name: 'Submit' });
+    const cancelButton = recorder.page.getByRole('button', { name: 'Cancel' });
+
+
+    await recorder.page.click('x-pw-tool-item.pick-locator');
+    await submitButton.hover();
+    await recorder.trustedClick();
+    await recorder.recorderPage.getByRole('tab', { name: 'Aria' }).click();
+    await expect(recorder.recorderPage.locator('.tab-aria .CodeMirror')).toMatchAriaSnapshot(`
+      - text: '- button "Submit"'
+    `);
+
+    await recorder.recorderPage.locator('.tab-aria .CodeMirror').click();
+    for (let i = 0; i < '"Submit"'.length; i++)
+      await recorder.recorderPage.keyboard.press('Backspace');
+
+    {
+      // No accessible name => two boxes.
+      const box11 = roundBox(await submitButton.boundingBox());
+      const box12 = roundBox(await recorder.page.locator('x-pw-highlight').first().boundingBox());
+      expect(box11).toEqual(box12);
+
+      const box21 = roundBox(await cancelButton.boundingBox());
+      const box22 = roundBox(await recorder.page.locator('x-pw-highlight').last().boundingBox());
+      expect(box21).toEqual(box22);
+    }
+
+    {
+      // Different button.
+      await recorder.recorderPage.locator('.tab-aria .CodeMirror').pressSequentially('"Cancel"');
+      await expect(recorder.page.locator('x-pw-highlight')).toBeVisible();
+      const box1 = roundBox(await cancelButton.boundingBox());
+      const box2 = roundBox(await recorder.page.locator('x-pw-highlight').boundingBox());
+      expect(box1).toEqual(box2);
+    }
+  });
+
+  test('should show aria snapshot error', async ({ openRecorder }) => {
+    const { recorder } = await openRecorder();
+    await recorder.setContentAndWait(`<main>
+      <button>Submit</button>
+      <button>Cancel</button>
+    </main>`);
+
+    const submitButton = recorder.page.getByRole('button', { name: 'Submit' });
+
+    await recorder.page.click('x-pw-tool-item.pick-locator');
+    await submitButton.hover();
+    await recorder.trustedClick();
+
+    await recorder.recorderPage.getByRole('tab', { name: 'Aria' }).click();
+    await expect(recorder.recorderPage.locator('.tab-aria .CodeMirror')).toMatchAriaSnapshot(`
+      - text: '- button "Submit"'
+    `);
+
+    await recorder.recorderPage.locator('.tab-aria .CodeMirror').click();
+    await recorder.recorderPage.keyboard.press('Backspace');
+    // 1 highlighted token
+    await expect(recorder.recorderPage.locator('.source-line-error-underline')).toHaveCount(1);
+  });
+
+  test('should generate valid javascript with multiline snapshot assertion', async ({ openRecorder }) => {
+    const { recorder } = await openRecorder();
+    // set width and height to 100% to ensure click is outside of the list
+    await recorder.setContentAndWait(`<body style="width:100%;height:100%"><ul><li>item 1</li><li>item 2</li></ul></body>`);
+
+    await recorder.page.click('x-pw-tool-item.snapshot');
+    await recorder.page.hover('body');
+    await recorder.trustedClick();
+
+    // playwright tests assertions are uncommented
+    await expect.poll(() =>
+      recorder.text('Playwright Test')).toContain([
+      `  await expect(page.locator('body')).toMatchAriaSnapshot(\``,
+      `    - list:`,
+      `      - listitem: item 1`,
+      `      - listitem: item 2`,
+      `    \`);`,
+    ].join('\n'));
+
+    // non-test javascript has commented assertions
+    await expect.poll(() =>
+      recorder.text('JavaScript')).toContain([
+      `  // await expect(page.locator('body')).toMatchAriaSnapshot(\``,
+      `  //   - list:`,
+      `  //     - listitem: item 1`,
+      `  //     - listitem: item 2`,
+      `  //   \`);`,
+    ].join('\n'));
+
+  });
+});