ruifigueira / playwright-crx Goto Github PK

Support context.cookies() API.

CDP Storage.getCookies is not available, but if our chrome extension has cookies permissions (with host_permissions specifying supported hosts), we can retrieve those cookies with chrome.cookies.getAll

Hello Rui,

I hope you are doing well.
After the below commit 18ca4ea we are unable to take screenshots.

We are getting the error below:

background.js:83769 Uncaught Error: binary: expected base64-encoded buffer, got object
    at tBinary (background.js:83769:11)
    at background.js:83808:22
    at CrxConnection.dispatch (background.js:118150:26)
    at CrxConnection.dispatch (background.js:118434:18)
    at background.js:135631:83
    at run (background.js:312:9)
    at runIfPresent (background.js:336:11)
    at channel.port1.onmessage (background.js:383:7)
tBinary @ background.js:83769
(anonymous) @ background.js:83808
dispatch @ background.js:118150
dispatch @ background.js:118434
(anonymous) @ background.js:135631
run @ background.js:312
runIfPresent @ background.js:336
channel.port1.onmessage @ background.js:383

It was working on the commit d808a75

The issue is not reproducible via unit tests,
for example, the below code takes the screenshot:

test("test screenshot", async ({ page }) => {
  await page.goto("https://example.com");
  const screenshot = await page.screenshot();
  expect(screenshot).not.toBeNull();
});

To reproduce the issue we have to load it as an extension to chrome.
We can simply add before createTodos

.
.
.
await page.screenshot();
await createTodos(page);

I believe the change was the playwright's version. Since the difference is huge and the change caused the issue is not on our side I don't know where to look for the fix.

I would love to help if you can give me a direction.
Thanks in advance,
Best regards,

Ekin

https://bugs.chromium.org/p/chromium/issues/detail?id=1450904

With memfs we can get tracings. It captures screenshots but no snapshots.

Here is an example (it opens the memfs file in trace.playwright.dev):

test('should trace', async ({ runCrxTest, _extensionServiceWorkerDevtools }) => {
  await runCrxTest(async ({ crxApp, page, context }) => {
    await context.tracing.start({ snapshots: true, screenshots: true, sources: true });
    await page.goto('https://demo.playwright.dev/todomvc/#/');
    await page.getByPlaceholder('What needs to be done?').fill('Playwright CRX rocks!');
    await page.getByPlaceholder('What needs to be done?').press('Enter');
    await page.getByLabel('Toggle Todo').click();
    await page.getByRole('button', { name: 'Clear completed' }).click();
    await context.tracing.stop({ path: '/crx/trace.zip' });

    const tracePage = await crxApp.newPage();
    await tracePage.goto('https://trace.playwright.dev');

    const [chooser] = await Promise.all([
      tracePage.waitForEvent('filechooser'),
      tracePage.getByRole('button', { name: 'Select file(s)' }).click(),
    ]);
    await chooser.setFiles('/crx/trace.zip');
    debugger;
  });
});

Problem seems to be related with the way playwright determines the API name.

Basically, it uses the stacktrace but because we're using vite, which compiles to a single file, it's not able to determine the api name and, without it, it doesn't trigger the instrumentation events.

Hi, could you please add support for custom test ID attributes ?

Currently, it is only supported for the default one (data-testid), which can be used by page.byTestId()

Thanks

In recent chromium versions, when detaching playwright-crx, the corresponding tab crashes with Error code: STATUS_BREAKPOINT:

I was able to track down the issue to Emulation.setEmulatedMedia when setting forced-colors feature to either none or active. Even though the instruction executes successfully, it crashes the attached tab when we try to detach it using chrome.debugger.detach.

Minimal code for a chrome extension that reproduces the bug on Chromium 119.0.6045.9, Windows 11:

• manifest.json:

{
  "name": "Bug crash - forced-colors",
  "version": "0.0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "permissions": ["debugger", "tabs"]
}

• background.js:

(async () => {
  const { id: tabId } = await chrome.tabs.create({ url: 'about:blank' });
  await chrome.debugger.attach({ tabId }, '1.3');
  await chrome.debugger.sendCommand({ tabId }, 'Emulation.setEmulatedMedia', { media: "", features: [{name: "forced-colors", value: "none" }]});
  // detaching will crash the tab with 
  await chrome.debugger.detach({ tabId });
})();

In Chromium 117.0.5938.62, the issue doesn't occurr.

Hey @ruifigueira, thanks for this implementation of playwright and it works very well in almost all scenarios, and I was able to bundle it in an extension version with vite and react. However, I am having some issues with certain sites for example proton mail. I'm trying to write a script that checks for the login email and password inputs, and fills it. However, the script just freezes after navigation to the page and then gives the errors as in the title. If I cancel the debugger then the sites loads normally, but at that point the automation won't work

However, it works when I try it with core playwright. I tried going through the playwright-crx to debug and possibly fix and contribute but I was not able to find anything, and could not determine where to start to contribute.

This is the small script that I used:

    await page.goto("https://www.proton.me", { waitUntil: "domcontentloaded" });
    await page.getByRole("link", { name: "Sign in" }).click();

    await page.waitForSelector("//input[@id='username']");

    await page.getByLabel("Email or username").click();
    await page.getByLabel("Email or username").fill(Config.proton.email);
    await page.getByLabel("Password").click();
    await page.getByLabel("Password").fill(Config.proton.password);
    await page.getByRole("button", { name: "Sign in" }).click();

and I have received the following stack trace when the script stops:

No tabId provided for Runtime.enable
_send @ index-345ed8d1.mjs?v=66092da6:123583
send @ index-345ed8d1.mjs?v=66092da6:123518
_rawSend @ index-345ed8d1.mjs?v=66092da6:107176
send @ index-345ed8d1.mjs?v=66092da6:107243
_sendMayFail @ index-345ed8d1.mjs?v=66092da6:107249
_onAttachedToTarget @ index-345ed8d1.mjs?v=66092da6:109806
(anonymous) @ index-345ed8d1.mjs?v=66092da6:109548
emit @ index-345ed8d1.mjs?v=66092da6:10034
(anonymous) @ index-345ed8d1.mjs?v=66092da6:107267
Promise.then (async)
_onMessage @ index-345ed8d1.mjs?v=66092da6:107264
_onMessage @ index-345ed8d1.mjs?v=66092da6:107185
_emitMessage @ index-345ed8d1.mjs?v=66092da6:123588
(anonymous) @ index-345ed8d1.mjs?v=66092da6:123468

It would be great if you would be able to point me at the right direction, and I'm hoping I could contribute to playwright-crx.

Thanks.

Hey @ruifigueira, awesome work here and thank you for this.

I just wanted to ask a quick question. Is it possible to run our scripts in the background without visibly opening a tab in the browser and only navigate to the page once the script is complete? I have been trying to figure this out but can't seem to get anywhere.

Thanks.

When I run pnpm i playwright-crx, the installation failed and no file was found: playwright/packages/playwright/bundles/babel

This seems to be used because the local file: path is used in package.json

Hello,

first of all, thank you very much for your efforts in creating this tool it will be a great fit for my project.

The issue is that I need to utilize CDPSession which gives me the error while creation, the error looks like:

background.js:135091 No tabId provided for Target.attachToBrowserTarget

I thought it might be related to #1 but then I tried the solution from there it didn't help.

• To reproduce the error;

// background.ts
import { crx } from 'playwright-crx';
import { createTodos } from './todos';

chrome.action.onClicked.addListener(async ({ id: tabId }) => {
  await chrome.action.disable();
 
  const crxApp = await crx.start({ slowMo: 500 });
  const page = await crxApp.attach(tabId!).catch(() => crxApp.newPage());
  try {
    await page.goto("https://www.example.com/", { waitUntil: "load" });
    const context = page.context();
    const client = await context.newCDPSession(page);
    console.log("CDP Session:",  client);
    await createTodos(page);
  } finally {
    await crxApp.close();
    await chrome.action.enable();
  }
});

About CDPSession:
https://playwright.dev/docs/api/class-cdpsession

How can we fix this issue? I will continue inspecting to find some fix for this one.

Thank you very much!

Best regards,