Injecting HTML/CSS elements within cypress tests each time a page is loaded without manually invoking cypress command

Hello and thanks in advance for your answers.

So I am currently trying to do something that I am aware cypress is not really made for to begin with.
I use Cypress Studio, the experimental feature of Cypress, to let a user generate a test on a given site which is not always the same without writing any line of code. Long story short, a Python script creates the cypress E2E script in the first place and asks for the target site URL to the user (simply using the cy.visit('url') command), so the E2E script will automatically lead to the desired site and the user can then use Cypress Studio to record the test.

This Python script also writes a call of a JS function that gets the site's HTML document and prepends a simple div containing a button.

I need this div to remain on the cypress testing interface whatever action is made by the user while they use Cypress Studio, as they are supposed to interact with it during the recording.

So, the main issue is to deal with the redirections that happen while browsing the site, as each time the page is reloaded the div disappears (which is not surprising).

So, to achieve such a thing, I tried to use the cy.on(...) feature proposed by Cypress (https://docs.cypress.io/api/cypress-api/catalog-of-events), with the events 'url:changed', 'window:load' and windows:before:load to call the function each time the event triggers, as follows :

<!-- language: lang-js -->

import '../support/redefine'
import '../support/commands'
import { inject_stepper_toolbar_HTML } from '../support/commands';

it('First_test', function() {
    cy.on('url:changed', () => {
        inject_stepper_toolbar_HTML();
    })

    cy.viewport(1280,720)
    cy.visit('url');
});

The function uses the cy.document().then() promise-like feature of Cypress, and goes as follows :

<!-- language: lang-js -->

function inject_stepper_toolbar_HTML() {
  console.log('IN TRIGGER'); 
  return cy.document().then((doc) => {
      if(!doc.getElementById("cypress_recorder_toolbar")){
          console.log("TOOLBAR");

          //cy.load_recorder_styles();
          let $toolbar_div = doc.createElement('div');
          $toolbar_div.setAttribute('id', "cypress_recorder_toolbar");
          $toolbar_div.setAttribute('class', "cypress_recorder_toolbar");

          let $stepper_button = doc.createElement('button');
          $stepper_button.setAttribute('id', "cypress_recorder_stepper_button_start");
          $stepper_button.setAttribute('class', "cypress_recorder_stepper_button_class" );
          $stepper_button.innerHTML= "Start Step";

          $toolbar_div.innerHTML = '<div class="inner_recorder_div"></div>';

          $toolbar_div.appendChild($stepper_button);
          doc.body.prepend($toolbar_div);
          console.log("TOOLBAR HAS BEEN ADDED");
          //cy.inject_button_swapper();
      }
      else{
          console.log("TOOLBAR ALREADY HERE");
      }
  });

This is what it gives (and what is expected, Wikipedia with a button prepended to the top of the page), taking for example wikipedia, when launching Cypress with the above script. BUT, when navigating through Wikipedia, the div will sometimes appear and sometimes disappear (it is absent most of the time but comes back occasionally).

What I am struggling to understand is why, the event triggers but the code within the then()statement doesn't seem to be executed in any way. The log IN TRIGGERis always present, but neither TOOLBARnor TOOLBAR ALREADY HERE are.

I guess this has something to do with the way Cypress manages the .then() as I recall reading that this was promise-like but not a real promise.

Any idea how I would be able to deal with this issue ?

Some precisions :

I cannot add the button to the site I want to work on

I tried Cypress command version of the inject_stepper_toolbar_HTML function, along with a version that doesn't use the return since the Cypress .then() is supposed not to need one

Since my guess is that the issue comes from the forced asynchronous nature of the code executed within the on('url:changed') event, I tried overwriting the .click() instruction of Cypress to make it wait by default. Of course this doesn't apply to what is performed within Cypress Studio, so nothing to see here.

Thanks again for your replies.

The Cypress test runner finishes after the last explicit command in the test script, which in your example is cy.visit('url') - or more precisely after the page-load event has fired.

Since you are taking action in an asynchronous event handler, you should add a check for the new elements after loading.

it('First_test', function() {
  cy.on('url:changed', () => {
    inject_stepper_toolbar_HTML()
  })

  cy.viewport(1280,720)
  cy.visit('url')

  cy.get('#cypress_recorder_toolbar')
})

That still might not cut it, depending on how consistently url:changed is fired after cy.visit(). I think it would be ok, but may be affected by things like the testIsolation switch (when on, this will send the page back to /about in between tests).

A more deterministic approach would be better

it('First_test', function() {

  cy.viewport(1280,720)
  cy.visit('url')

  cy.then(() => {
    inject_stepper_toolbar_HTML()
  })

  cy.get('#cypress_recorder_toolbar')
})