Merge pull request ruifigueira#4 from ruifigueira/feat/player

Feature: player

.gitattributes

@@ -0,0 +1,4 @@
+# text files must be lf for golden file tests to work
+* text=auto eol=lf
+# make project show as TS on GitHub
+*.js linguist-detectable=false

.github/workflows/build.yml

@@ -15,10 +15,19 @@ jobs:
       - run: npm run build
         env:
           NODE_OPTIONS: "--max_old_space_size=4096"
-      - run: npm run test
+      - run: npm run test:install
+      - run: xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run test
+      - uses: actions/upload-artifact@v3
+        with:
+          name: recorder-crx
+          path: |
+            examples/recorder-crx/dist/
+          retention-days: 5
       - uses: actions/upload-artifact@v3
         if: always()
         with:
           name: playwright-report
-          path: tests/playwright-report/
+          path: |
+            tests/playwright-report/
+            tests/test-results/
           retention-days: 5

CONTRIBUTING.md

@@ -0,0 +1,46 @@
+# Contributing
+
+## Tests
+
+We use playwright to test playwright-crx.
+
+The `context` fixture is extended to load a `playwright-crx` extension (e.g., recorder-crx or test-entension)
+
+### Run tests in extension service worker
+
+To run tests in our `test-extension` just use `crxTest.ts` and use the `runCrxTest` with your test function.
+
+It will run the function inside the extension:
+
+```ts
+import { test } from './crxTest';
+
+test('should add todo item', async ({ runCrxTest }) => {
+  await runCrxTest(async ({ page }) => {
+    await page.goto('https://demo.playwright.dev/todomvc');
+
+    await page.getByPlaceholder('What needs to be done?').fill('Hello world');
+    await page.getByPlaceholder('What needs to be done?').press('Enter');
+  });
+});
+```
+
+### Debug
+
+Debugging an extension service worker requires opening its service worker devtools.
+
+That can be done in `chrome://extensions` but to avoid lots of clicks and to allow test debugging, you can use the `_extensionServiceWorkerDevtools` fixture.
+
+This fixture will open the extension devtools and set a `debugger` instruction for the debugger to pause before running the test.
+
+That way, you can set all necessary breakpoints before continuing the execution.
+
+Here is an example using both `runCrxTest` and `_extensionServiceWorkerDevtools`:
+
+```ts
+test(`should debug`, async ({ runCrxTest, _extensionServiceWorkerDevtools }) => {
+  await runCrxTest(async ({ crxApp, page /* other fixtures */ }) => {
+    // code goes here
+  });
+});
+```

examples/recorder-crx/src/background.ts

@@ -15,7 +15,7 @@
  */
 
 import type { CrxApplication } from 'playwright-crx';
-import { crx } from 'playwright-crx';
+import { crx, _debug, _setUnderTest } from 'playwright-crx';
 
 // we must lazy initialize it
 let crxAppPromise: Promise<CrxApplication> | undefined;
@@ -69,7 +69,7 @@ async function getCrxApp() {
 }
 
 async function attach(tab: chrome.tabs.Tab) {
-  if (!tab.id || attachedTabIds.has(tab.id)) return;
+  if (!tab?.id || attachedTabIds.has(tab.id)) return;
   const tabId = tab.id;
 
   // ensure one attachment at a time
@@ -101,4 +101,4 @@ chrome.contextMenus.onClicked.addListener(async (_, tab) => {
 });
 
 // for testing
-Object.assign(self, { attach });
+Object.assign(self, { attach, _debug, _setUnderTest });

index.d.ts

@@ -18,3 +18,9 @@ import type { Crx } from './src/types/types';
 export * from './src/types/types';
 
 export const crx: Crx;
+export function _setUnderTest(): void;
+export const _debug: {
+  enable(namespaces: string): void;
+  enabled(namespaces: string): boolean;
+  disable(): void;
+};