need to open beforeEach

TODO: make it work with beforeAll or think if global setup will do fine

tests/example.spec.ts

@@ -1,9 +1,17 @@
+import type { Page } from '@playwright/test';
 import { test, expect } from './fixtures/base';
 import { openPopup } from './pages/popup';
 
-test('should load popup', async ({ context, background, extensionId }) => {
-  const { popup } = await openPopup(context, background, extensionId);
+let popup: Page;
+test.beforeEach(async ({ context, extensionId }) => {
+  popup = await openPopup(context, extensionId);
+});
+test.afterAll(async () => {
+  await popup.close();
+});
 
+test('should load popup', async () => {
+  await popup.bringToFront();
   await expect(popup).toHaveTitle('Web Monetization Extension');
   await expect(popup.locator('#popup-container')).toBeAttached();
   await expect(popup.locator('header')).toHaveText('Web Monetization');
@@ -13,22 +21,12 @@ test('should load popup', async ({ context, background, extensionId }) => {
   );
 });
 
-test('shows connect form if not connected', async ({
-  context,
-  background,
-  extensionId,
-}) => {
-  const { page, popup } = await openPopup(context, background, extensionId);
-
+test('shows connect form if not connected', async ({ page }) => {
   await page.goto('https://example.com');
 
   await expect(popup).toHaveTitle('Web Monetization Extension');
   await expect(popup.locator('#popup-container')).toBeAttached();
   await expect(popup.locator('header')).toHaveText('Web Monetization');
-  await expect(popup.locator('header img')).toHaveAttribute(
-    'src',
-    /logo\.svg$/,
-  );
 
   await expect(popup.locator('form')).toBeVisible();
   await expect(popup.locator('form button[type="submit"]')).toBeVisible();

tests/pages/popup.ts

@@ -1,25 +1,10 @@
-import type { BrowserContext, Worker } from '@playwright/test';
+import type { BrowserContext } from '@playwright/test';
 
 // TODO: add browserName param
-export async function openPopup(
-  context: BrowserContext,
-  background: Worker,
-  extensionId: string,
-) {
-  // load a page from which to open the extension popup, make it the active tab
-  const page = await context.newPage();
+export async function openPopup(context: BrowserContext, extensionId: string) {
   const popup = await context.newPage();
-
-  await popup.goto(`chrome-extension://${extensionId}/popup/index.html`);
-
-  await background.evaluate(async () => {
-    // @ts-expect-error TODO
-    chrome.action.openPopup();
-  });
-
-  await page.bringToFront();
-  return {
-    page: page,
-    popup: popup,
-  };
+  const url = `chrome-extension://${extensionId}/popup/index.html`;
+  await popup.goto(url);
+  await popup.waitForLoadState("networkidle");
+  return popup;
 }