Adding another browser extension

[aidan-starke]

Hi, I am trying to test a token bridge between Ethereum and CENNZnet. At CENNZnet we have our own extension and I'm using cypress-browser-extension-plugin to load it in. How can I configure synpress to work with this?

[drptbl]

Hey @aidan-starke, sorry for late answer.

You would have to add a support for this extension in synpress. Probably very similar to what you did using plugin mentioned above.

To make it work, you will have to do these:

1. Prepare unpacked folder with Chrome extension (CENNZnet wallet?):
   https://github.com/Synthetixio/synpress/blob/dev/plugins/index.js#L38
   You can see that I'm always fetching specific or latest metamask version from their github above. You would have to do similar thing for your extension.
2. Load extension in browser:
   https://github.com/Synthetixio/synpress/blob/dev/plugins/index.js#L41
   After you've prepared your extension folder, provide the path to it for synpress, so that browser starts with extension loaded up.
3. That's it! However, if you want to interact with your extension, you will have to add custom commands for it, like I did for metamask (using puppeteer):
   https://github.com/Synthetixio/synpress/blob/dev/plugins/index.js#L47-L249

All Best,
Jakub.

[aidan-starke]

Thanks for your reply, I ended up doing exactly this! The only way I could interact with the extension however was to find its url in the puppeteerBrowser.targets(), which meant I couldn't test my app within the Cypress window, I had to open localhost:3000 in a new puppeteer window.

https://github.com/cennznet/bridge-ui/blob/testing/cypress/commands/puppeteer.js#L51-L76

Doing so has enabled me to test the e2e flow of our token bridge, but is there any way you know of that I could connect the CENNZnet extension within puppeteer.connect()? This would enable me to create much clearer tests, as of now my e2e_spec is just a bunch of cypress commands returning true, false, or a string value.

[drptbl]

Oh, it looks awesome @aidan-starke! Thanks for providing repository url.

I will take a deeper look at it tomorrow and let you know further details and how to handle it. Sorry, it's quite late right now.

side-node:
If you want, we could also add "official" support for CENNZnet extension to synpress as I can see that you've done a lot of work already to support it. Are you ok with creating PR with your work? It doesn't have to be perfect, we will iterate on it together and make it work well before merging. Let me know what you think.

Thanks for great work 🎉!

All Best,
Jakub.

[aidan-starke]

Thanks Jakub! I needed this testing to work in our CI pipeline so I extracted the code from Synpress rather than editing it within node_modules. All the code is viewable here: https://github.com/cennznet/bridge-ui/tree/testing/cypress.

I think adding support for CENNZnet is a great idea, we will definitely be testing more apps in the future! When I get a chance I will work on making a pull request.