Cypress and Script Injection inside test scenario

Question

I am pretty new to Cypress and at the moment I am trying to test a webpage that uses browser extension I created. This extension only injects a set of JS and CSS files to the webpage and I want to simulate the same thing in my integration tests to be able to inject the libraries and test the behavior. I was wondering if there is a way to access document object from Cypress test to inject CSS or JavaScript to the head of the webpage.

Answer 1

Yes, there is. Cypress is actually running in the browser, and although commands are queued asynchronously, you can queue up native JS code to be run, like so:

cy.get("html").then(() => {
    document.querySelector("div.myDiv").innerHTML = "...";
    // ...
});

If you are trying to target or modify a specific element, you can get it via Cypress to take advantage of automatic retries to wait for the element to exist before operating on it:

cy.get("div.myDiv").then(elem => {
    elem.innerHTML = "...";
    // ...
});