How to use plugins.execute method in Cypress

In order to include/import CSS files inside Cypress from SFCs, you need to use the vue-style-loader CSS loader, before the css-loader.

So this:

...
{
    test: /\.css$/,
    use: [ 'css-loader' ]
}
....

Should be this:

...
{
    test: /\.css$/,
    use: ['vue-style-loader', 'css-loader' ]
}
....

It seems that instead of using cy.trigger(), we need to use native events to cause Leaflet to think the map is dragging.

We've written a custom Cypress command dragMapFromCenter, and using it looks like this:

cy.get('#map-canvas').dragMapFromCenter({
  // Go 1/6 of map container width to the right (negative direction)
  xMoveFactor: -1 / 6,
  // Go 1/3 of map container height to the top (positive direction)
  yMoveFactor: 1 / 3
});

// We need to wait for something to happen after map starts moving
cy.get(".leaflet-container.leaflet-loading");

Here's the implementation of dragMapFromCenter. Put this in cypress/support/commands.js to be able to use it in tests.

// # cy.get('#map-canvas').dragMapFromCenter({ xMoveFactor: 0.25, yMoveFactor: -0.5 })
//
// Allows dragging a Leaflet map by the given amounts. A factor of 1 means the map
// will be dragged the whole width of the map canvas in X direction and the whole
// height of the map canvas in Y direction.
Cypress.Commands.add(
  'dragMapFromCenter',
  { prevSubject: 'element' },
  (element, { xMoveFactor, yMoveFactor }) => {
    // Get the raw HTML element from jQuery wrapper
    const canvas = element.get(0);
    const rect = canvas.getBoundingClientRect();
    const center = {
      x: rect.left + rect.width / 2,
      y: rect.top + rect.height / 2
    };

    // Start dragging from the center of the map
    cy.log('mousedown', {
      clientX: center.x,
      clientY: center.y
    });
    canvas.dispatchEvent(
      new MouseEvent('mousedown', {
        clientX: center.x,
        clientY: center.y
      })
    );

    // Let Leaflet know the mouse has started to move. The diff between
    // mousedown and mousemove event needs to be large enough so that Leaflet
    // will really think the mouse is moving and not that it was a click where
    // the mouse moved just a tiny amount.
    cy.log('mousemove', {
      clientX: center.x,
      clientY: center.y + 5
    });
    canvas.dispatchEvent(
      new MouseEvent('mousemove', {
        clientX: center.x,
        clientY: center.y + 5,
        bubbles: true
      })
    );

    // After Leaflet knows mouse is moving, we move the mouse as depicted by the options.
    cy.log('mousemove', {
      clientX: center.x + rect.width * xMoveFactor,
      clientY: center.y + rect.height * yMoveFactor
    });
    canvas.dispatchEvent(
      new MouseEvent('mousemove', {
        clientX: center.x + rect.width * xMoveFactor,
        clientY: center.y + rect.height * yMoveFactor,
        bubbles: true
      })
    );

    // Now when we "release" the mouse, Leaflet will fire a "dragend" event and
    // the search should register that the drag has stopped and run callbacks.
    cy.log('mouseup', {
      clientX: center.x + rect.width * xMoveFactor,
      clientY: center.y + rect.height * yMoveFactor
    });
    requestAnimationFrame(() => {
      canvas.dispatchEvent(
        new MouseEvent('mouseup', {
          clientX: center.x + rect.width * xMoveFactor,
          clientY: center.y + rect.height * yMoveFactor,
          bubbles: true
        })
      );
    });
  }
);

When your element is disabled I see there is an attribute and value readonly="readonly" that is being added to your element, you can assert the presence of that -

cy.get('#IdCategoria').should('have.attr', 'readonly', 'readonly')

You can use day.js to get the current date and format it accordingly.

const dayjs = require('dayjs')

//In test
cy.log(dayjs().format('DD/MM/YYYY'))  //Prints todays date 30/09/2021
cy.get('textfield').type(dayjs().format('DD/MM/YYYY')) //input today's date in DD/MM/YYYY format

Check out this plug-in for Cypress that will print all browser logs to stdout:

https://github.com/flotwig/cypress-log-to-output

It only works for Chrome, so just make sure your CI is set up to use Chrome and you're using Chrome locally too.

Is failing because you have this assertion .should('have.attr', 'target') before this invocation .invoke('removeAttr', 'target').

this will work

 cy.get(`${sitestovisit.searchBoxFormID} > form`)
   .invoke('removeAttr', 'target')

And.. if you need to see if the target attribute exist before deleting it I would do this.

  cy
      .get(`${sitestovisit.searchBoxFormID} > form`)
      .should('have.attr', 'target')

  cy
       .get(`${sitestovisit.searchBoxFormID} > form`)
       .invoke('removeAttr', 'target')

maybe you can this this try when using cy.request pretty much like the usual way you use restful in cy.request

example your query name is findUser with variable of username your query should look something like findUser(username:"hello"){id, name} and so on

but instead of just this, you need to pass it as json if it is a query then it'll be {"query": findUser(username:"hello"){id, name}} this will actually be your body.

an example is below...

const query = `{
  findUser(username:"hello") {
    id
  }
}`;
    
cy.request({
  url: 'http://localhost/graphql/',  // graphql endpoint
  body: { query },                   // or { query: query } depending if you are writing with es6
  failOnStatusCode: false            // not a must but in case the fail code is not 200 / 400
}).then((res) => {
  cy.log(res);
});

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 = "...";
    // ...
});

Essentially you have an array of possible error messages, so you can test if the element's text exists within that array.

expect(['text_A', 'text_B']).to.include(el.text())

Another option that reads better would be to use .oneOf

expect(el.text()).to.be.oneOf(['text_A', 'text_B']);

https://docs.cypress.io/guides/references/assertions.html#BDD-Assertions