How to use prepareContextWithCookie method in Cypress

This has been answered many times before (I gave at least two similar answers here and here).

You can basically do two things:

1. nest the commands:

   it('test', function () {
       cy.request().then( resp => {
           return cy.visit(`/path/${response.body}`);
       });
   });
   

2. or, if you don't like callback hell, there are many patterns. Here's three:

   ^{(note, in following examples you don't gain anything as opposed to nesting as shown above because all these examples nest at minimum once. But these patterns may still be preferable in case you'd need to nest more than once, or if you need to reuse the variable much later in the test and don't want to put all commands into the first callback).}

   it('test', function () {
       let value;
       cy.request().then( resp => {
           value = response.body;
       });
       cy.then(() => {
           return cy.visit(`/path/${value}`);
       });
   });
   

   or (using mocha context via Cypress' .as() abstraction):

   it('test', function () {
       let value;
       cy.request().then( resp => {
           cy.wrap(response.body).as('value');
       });
       cy.get('@value').then( value => {
           return cy.visit(`/path/${value}`);
       });
   });
   

   or (using mocha context directly):

   it('test', function () {
       cy.request().then( resp => {
           // store as mocha context
           // (note: in this pattern it's important the test case function is
           //  regular, non-arrow function; and the callback passed to `.then`
           //  is an arrow function so that you have access to parent
           //  lexical context via `this`)
           this.value = response.body;
       });
       cy.then(() => {
           return cy.visit(`/path/${this.value}`);
       });
   });
   

As you stated in your question there is not difference between cy.get("a").find("b") and cy.get("a b"). But the most important difference between find and get commands in Cypress is that cy.get() is chained off of cy, it always looks for the selector within the entire document as stated in Cypress documents. But as again stated in Cypress documents find works as follows:

Get the descendent DOM elements of a specific selector.

So the command cy.get("a").find("b") returns all the b elements which are successor of an a element, but cy.get("a").get("b") finds all the a and b elements regardless of they are parent and child.

The solution was much easier than anticipated. Unfortunately, I didn't see any example of this online but it works great.

export const loginQuery = `
  mutation login($email: String!, $password: String!) {
    login(email: $email, password: $password) {
      authToken
    }
  }
`;

export default ({ url, method, userPath }) => {
  cy.fixture(userPath).then(res => {
    cy.request({
      method,
      url,
      headers: { 'Content-Type': 'application/json' },
      body: { query: loginQuery, variables: res },
      failOnStatusCode: false
    });
  });
};

I had no idea I could just declare variables in the body and they would pass in without issue if I structured the query/mutation as I would normally.

The closest to my successful solution was this gist https://gist.github.com/yusinto/30bba51b6f903c1b67e0383f4a288269 . However, the gist still used string interpolation. Looks like he could simplify his gist by just setting variables.

This gist was found with @xadm 's suggested search string SO for mutations using fetch/curl/etc

I have to face this today. If you are getting a raw body response (string) you have to get the link in this way:

            const links = body.split("href=http://my.url.com");
            var activation_link = links[0].match(/\bhttp?:\/\/\S+/);
            activation_link= activation_link[0].replace('"','')
            cy.visit(activation_link)

You may use .then(); quoting from the cypress documentation for .then():

.then() is modeled identically to the way Promises work in JavaScript. Whatever is returned from the callback function becomes the new subject and will flow into the next command (with the exception of undefined).

Try something like this:

var testArray: any[] = new Array();

cy
    .get('element')
    .each(($el) => {
        testArray.push($el.text());
        cy.log(testArray.toString());
    ).then(() => cy.log(testArray.toString())
});

The answer you linked to deals with selecting text specifically outside an input field. Here is an answer for selecting text in an input field.

They posted a demo, and I've modified it for Cypress.

HTML:

<html>
  <body>
    <textarea type="textarea" name="message" id="message">Hello World</textarea>
  </body>
</html>

Cypress:

function createSelection(field, start, end) {
    if( field.createTextRange ) {
        var selRange = field.createTextRange();
        selRange.collapse(true);
        selRange.moveStart('character', start);
        selRange.moveEnd('character', end);
        selRange.select();
    } else if( field.setSelectionRange ) {
        field.setSelectionRange(start, end);
    } else if( field.selectionStart ) {
        field.selectionStart = start;
        field.selectionEnd = end;
    }
    field.focus();
}

describe('Text selection', function() {
    it('Selects text in a text area', function() {
        cy.get("#message").then(textarea => {
            createSelection(textarea, 0, 5);
        });
    }
}

2022 here and tested with cypress version: "6.x.x" until "10.x.x"

You could use { force: true } like:

cy.get("YOUR_SELECTOR").click({ force: true });

but this might not solve it ! The problem might be more complex, that's why check below

My solution:

cy.get("YOUR_SELECTOR").trigger("click");

Explanation:

In my case, I needed to watch a bit deeper what's going on. I started by pin the click action like this:

Then watch the console, and you should see something like:

Now click on line Mouse Events, it should display a table:

So basically, when Cypress executes the click function, it triggers all those events but somehow my component behave the way that it is detached the moment where click event is triggered.

So I just simplified the click by doing:

cy.get("YOUR_SELECTOR").trigger("click");

And it worked ????

Hope this will fix your issue or at least help you debug and understand what's wrong.

From cypress documentation here:

Any environment variable on your machine that starts with either CYPRESS_ or cypress_ will automatically be added and made available to you.

Conflicting values will override values from cypress.json and cypress.env.json files.

Cypress will strip off the CYPRESS_ when adding your environment variables.

Exporting cypress env variables from the command line:

export CYPRESS_HOST=laura.dev.local

export cypress_api_server=http://localhost:8888/api/v1/

If you're using Windows you can set env variables using set or setx commands.

And in your test files you can call this:

Cypress.env()             // {HOST: "laura.dev.local", api_server: "http://localhost:8888/api/v1"}
Cypress.env("HOST")       // "laura.dev.local"
Cypress.env("api_server") // "http://localhost:8888/api/v1/"

Testing it via the Selector Playground (as N. suggested) is a good step. What you also can do is investigate screenshots which Cypress can make on failure. That shows the exact state of the application when the failure happened. That usually gives a good hint to the problem.

Besides that you can also try to set the wait to an absurt value like 10000. If Cypress can find the element at that case, the application is slow and therefor Cypress is not waiting long enough.