Can't select element using Cypress.io that has been appended to DOM via browser extension

Question

I'm trying to write tests for my chrome/firefox extension using Cypress.io

In my extension content-script, I append a button to the body element of the DOM and try to use cypress to click that button, however when running the test, the button is injected into the test runner DOM, instead of the DOM of the page that my test visits via cy.visit() - so my cy.get('injected element') call can't find the element.

It looks like cypress loads the cy.visit() page in an iframe and cy.get() can't find elements outside of that iframe.

How can I get around this?

Answer 1

Posting this for people who might run into the same problem in the future.

You can solve this problem by adding "all_frames": true inside content_scripts in the extension manifest.json. This allows the extension to be injected into all frames instead of just the top most frame of a tab

Here's a link for more information on all_frames

You can also add this only when you run cypress by modifying manifest.json before loading the extension into cypress test runner

-Read the manifest from the extension build folder

-Modify content_scripts to include "all_frames": 'true'

-Save the updated version of manifest