Playwright Recorder webextension for Chrome / Edge and Firefox

[ruifigueira]

I was able to set up a basic PoC for playwright recorder as a webextension, and currently runs in Chrome, Edge and Firefox.

Instead of trying to run the whole playwright stack as a webextension, it only runs the necessary bits from recorder.ts, which already has lots of isomorphic code. For instance, alll code generation logic is almost isomorphic right now, except the usage of EventEmitter, which is the only polyfill I had to import.

In terms of webextensions APIs, I'm only using chrome APIs that are compatible with firefox, namely:

• chrome.runtime / browser.runtime
• chrome.tabs / browser.tabs
• chrome.action / browser.action
• chrome.webNavigation / browser.webNavigation

For the purpose of this PoC, I implemented lighter versions of server page, frame and browserContext with only the necessary bits, and copied the server recorder.ts to remove all the things that don't make sense for the webextension.

TLDR: most of the code needed for the recorder to work is already isomorphic or only needs some minor adjustments. Non-isomorphic code can be replaced with implementations that rely on webextension APIs.

Firefox Demo:

https://github.com/microsoft/playwright/assets/1374559/0eb7da9d-0c60-4aa1-a699-36b9c5695b5c

Chrome Demo:

https://github.com/microsoft/playwright/assets/1374559/d1c60c66-67c2-458e-a7cb-7769a2c4fcb8

[github-actions[bot]]

Test results for "tests 1"

1 failed :x: [playwright-test] › playwright.artifacts.spec.ts:193:5 › should work with screenshot: only-on-failure & fullPage

8 flaky

:warning: [chromium-library] › library/tracing.spec.ts:243:5 › should not include trace resources from the previous chunks
:warning: [chromium-library] › library/tracing.spec.ts:243:5 › should not include trace resources from the previous chunks
:warning: [chromium-library] › library/tracing.spec.ts:243:5 › should not include trace resources from the previous chunks
:warning: [playwright-test] › ui-mode-test-progress.spec.ts:165:5 › should update tracing network live
:warning: [playwright-test] › ui-mode-test-watch.spec.ts:96:5 › should batch watch updates
:warning: [chromium] › components/splitView.spec.tsx:34:5 › should render sidebar first
:warning: [webkit-library] › library/browsercontext-clearcookies.spec.ts:146:3 › should remove cookies by name and domain
:warning: [webkit-library] › library/tracing.spec.ts:243:5 › should not include trace resources from the previous chunks

26944 passed, 619 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[github-actions[bot]]

Test results for "tests 1"

7 flaky

:warning: [chromium-library] › library/tracing.spec.ts:243:5 › should not include trace resources from the previous chunks
:warning: [chromium-library] › library/tracing.spec.ts:243:5 › should not include trace resources from the previous chunks
:warning: [firefox-page] › page/page-click-timeout-4.spec.ts:20:3 › should timeout waiting for stable position
:warning: [playwright-test] › ui-mode-test-progress.spec.ts:165:5 › should update tracing network live
:warning: [chromium-library] › library/tracing.spec.ts:243:5 › should not include trace resources from the previous chunks
:warning: [webkit-library] › library/browsercontext-clearcookies.spec.ts:146:3 › should remove cookies by name and domain
:warning: [webkit-library] › library/tracing.spec.ts:243:5 › should not include trace resources from the previous chunks

26946 passed, 619 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[github-actions[bot]]

Test results for "tests 1"

1 failed :x: [playwright-test] › reporter.spec.ts:473:9 › created › should not have internal error when steps are finished after timeout

4 flaky

:warning: [chromium-library] › library/tracing.spec.ts:243:5 › should not include trace resources from the previous chunks
:warning: [chromium-library] › library/tracing.spec.ts:243:5 › should not include trace resources from the previous chunks
:warning: [firefox-page] › page/page-click-timeout-4.spec.ts:20:3 › should timeout waiting for stable position
:warning: [webkit-library] › library/browsercontext-viewport-mobile.spec.ts:118:5 › mobile viewport › default mobile viewports to 980 width

26901 passed, 618 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[github-actions[bot]]

Test results for "tests 1"

2 flaky

:warning: [chromium-library] › library/tracing.spec.ts:243:5 › should not include trace resources from the previous chunks
:warning: [webkit-library] › library/tracing.spec.ts:243:5 › should not include trace resources from the previous chunks

26956 passed, 619 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[github-actions[bot]]

Test results for "tests 1"

3 flaky

:warning: [chromium-library] › library/trace-viewer.spec.ts:240:1 › should have network requests
:warning: [webkit-library] › library/browsercontext-clearcookies.spec.ts:72:3 › should remove cookies by name regex
:warning: [webkit-page] › page/workers.spec.ts:243:3 › should support offline

27246 passed, 671 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[pavelfeldman]

Archiving this