craigwh10 / dependency_install_swapper Goto Github PK

currently, this listens to changes to the main of the yarnpkg.com/packages/* site, including its subtrees, content, and attributes.

this isn't optimal, but it works effectively - some work needs to be done to find a more reliable point to observe from which captures when the DOM has finished changing, as with CSR the DOM modifies many times before it is "done".

how to reproduce:

• build application in test mode (logging enabled)
• go to https://yarnpkg.com/package/jest
• open devtools console
• look at frequency of mutation changes from observed node

definition of done:

• quality gate passes
• frequency of logs reduced
• manual tests and approver tests by looking at the content logs
• you can still switch between packages through search and observe command changes after timeout

Current behaviour

• Shows an empty dropdown when you first install the application

Desired behaviour

• If on npmjs.org for first time after installing (or not selecting anything)
  • Should show NPM as selected option
• If on yarnpkg.org for first time after installing (or not selecting anything)
  • Should show Yarn as selected option

This could possibly show as a placeholder, some behaviour to be wary of is if it selects npm if you go npm for first time, then if you go to yarn it should not transform it to npm, but be yarn

I have made an initial attempt on https://github.com/craigwh10/dependency_install_swapper/pull/18/files

I'll be bringing more attention to this on the weekend but the questions are currently:

Open questions:

• How do I trigger select changes from within the package
• How can I possibly open the popup from the browser functions where extensions live

Resolved

• Loading the extension in via puppeteer works and is shown in PR

Notes

• Cypress isn't suitable for this, nor is WDIO/playwright as they don't support content scripts for extensions.
• Is using manifest v3, so background_page isn't relevant.
• We have:
  • a service_worker, which is a type available in puppeteer tags
  • a content_script which on tab change, it triggers the command amendment handler
  • a popup_script which sends messages including changed value payload to content_script to trigger handler with change

Would be nice to have https://www.npmjs.com/package/axe-core or similar running inside one of the git jobs in the case of changing any of the HTML/CSS.

Currently, this is only done manually, assumedly this would require some functional script writing which falls back onto the issue of using Puppeteer, so minimally the linting rules would be good for this.

We have:

• a service_worker, which is a type available in puppeteer tags
• a content_script which on tab change, it triggers the command amendment handler
• a popup_script which sends messages including changed value payload to content_script to trigger handler with change

Shows the commented out jobs, the first uses a shared job to install chrome - which shows to be visible inside the tests.

Currently, the only targets that are being picked up are page and browser, and the tests hang waiting for target.

Have tried increasing timeouts.

https://github.com/marketplace/actions/puppeteer-headful is an option I've tried without much success but is still a viable option

Useful resouce

• https://github.com/craigwh10/dependency_install_swapper/tree/main/ci-test
  • This emulates the pipeline environment via a docker image with associate shell scripts to build and see log output in a logfile.
• https://github.com/marketplace/actions/setup-chrome
• https://stackoverflow.com/questions/62228154/puppeteer-fails-to-initiate-in-github-actions
• https://github.com/mujo-code/chrome-extension/blob/master/packages/extension/src/e2e.test.js
• puppeteer/puppeteer#4796 (is an apparent issue in puppeteer-headful)
• https://github.com/marketplace/actions/puppeteer-headful-for-chrome-extension-testing
• https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md
• https://stackoverflow.com/questions/50073334/service-worker-installation-in-headless-chrome-via-puppeteer (possibly useful for service_worker task)