POC: Add End to End Tests for the Browser Extension

[nickytonline]

Cypress is great for end to end tests and it can even load a browser extension. It be good to explore if we can get the extension running in Cypress so that we can run a test suite of end to end tests for the browser extension.

• see if we can load the browser extension in Cypress (https://medium.com/@knoldus/how-to-load-chrome-extension-in-cypress-io-e313d3c68988)
• add a test to see if we can test the UI generated from the browser extension

If successful, it'd be great to add an E2E test suite for the browser extension.

[diivi]

I'll check this out.

[nickytonline]

The linked article mentions unzipping the browser extension. This isn't necessary. In the case of the OpenSauced extension, we just need to build the extension then hook up Cypress with the dist folder for the extension after building it.

[nickytonline]

@diivi, I tested your PR and the test works. I was digging a bit and it looks like Cypress does not appear to be able to open the extension popup (see cypress-io/cypress#14808), but Playwright supports this (see https://github.com/microsoft/playwright/blob/b3ce913551b88d14e06006d06f0e0a8d2346f665/docs/src/chrome-extensions-js-python.md?plain=1#L194 as an example test).

If you need the ID of the Chrome extension, it's pplnlkccgafncfoncmepefkcgjejfmge.

The PR you put up is for exploratory purposes, so see if you're able to trigger the popup with Playwright as there is a lot going on in the popup.

You don't have to do the whole flow with CI/CD, just a quick proof of concept.

Example test:

const EXTENSION_ID = 'pplnlkccgafncfoncmepefkcgjejfmge';

test('popup page', async ({ page, extensionId }) => {
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);
  await expect(page.getByRole('link', { name: 'OpenSauced' })).toBeVisible();
});

Additional links:

• Chrome extensions in Playwright
• Locators in Playwright

[github-actions]

🎉 This issue has been resolved in version 1.14.1-beta.3 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 1.14.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀