How to use hasOnlyRouteMatcherKeys method in Cypress

You will need to enable search inside the shadow-root(s).

Add the option to the test config, or global config (cypress.config.js).

it('tests inside shadow DOM', {includeShadowDom: true}, () => {

  cy.get('ion-card:nth-child(3) input[formControlName="startDate"]')
    .type(myDate)

})

Will leave this here in case it helps somebody https://github.com/javieraviles/cypress-upload-file-post-form

Second scenario (send_form_data_with_file_in_post_request_spec.js):

I want to build up the FormData myself( new FormData(), formData.append/formData.set ) and send it directly with a POST request to the backend or submit the form with the FormData I have created. For this case, the transmitted data must be in the same format as the form's submit(), which type is set to "multipart/form-data". Having a look at the MDN web docs to see how you can build a FormData: Using FormData Objects, and knowing that at this very moment (Cypress 2.1.0) cy.request doesn't support FormData (multipart/form-data) so we will need a XMLHttpRequest, the test can be performed as follows. Include the following code in your "commands.js" file within the cypress support folder, so the command cy.form_request() can be used from any test:

// Performs an XMLHttpRequest instead of a cy.request (able to send data as 
// FormData - multipart/form-data)
Cypress.Commands.add('form_request', (method, url, formData, done) => {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
        done(xhr);
    };
    xhr.onerror = function () {
        done(xhr);
    };
    xhr.send(formData);
})

Then, in case you want to send the same form as before (form containing an excel file and other plain inputs) but build it by yourself and send it directly to the server, the test would be something like this:

describe('Testing the API', function () {

    it('Receives valid FormData and proccesses the information correctly', 
        function () {

    /*
    The reason why this test may look a bit tricky is because the backend endpoint is expecting the 
    submission of a web Form (multipart/form-data), not just data within a POST. The "cy.request()" 
    command doesn't support sending a web Form as a body in a POST request, so the test uses a support 
    command that has been created to perform a genuine XMLHttpRequest where a web Form can be placed.
    */

    //Declarations
    const fileName = 'your_excel_file.xlsx';
    const method = 'POST';
    const url = 'http://localhost:3000/api/excel_form';
    const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
    const inputContent2 = 'input_content2';
    const expectedAnswer = '{"msg":"X elements from the excel where successfully imported"}';

    // Get file from fixtures as binary
    cy.fixture(fileName, 'binary').then( (excelBin) => {

        // File in binary format gets converted to blob so it can be sent as Form data
        Cypress.Blob.binaryStringToBlob(excelBin, fileType).then((blob) => {

            // Build up the form
            const formData = new FormData();
            formData.set('file', blob, fileName); //adding a file to the form
            formData.set('input2', inputContent2); //adding a plain input to the form
            .
            .
            .
            // Perform the request
            cy.form_request(method, url, formData, function (response) {
                expect(response.status).to.eq(200);
                expect(expectedAnswer).to.eq(response.response);
            });

        })

    })

})

})

Cypress clears all cookies before each test

Cypress.Cookies.defaults({
  preserve: "adminhtml"
})

see: https://docs.cypress.io/faq/questions/using-cypress-faq.html#How-do-I-preserve-cookies-localStorage-in-between-my-tests

fyi: adminhtml cookie stores admin's session id

EDIT

It appears that in magento 2 admin session id is stored in a cookie named "admin"

Cypress.Cookies.defaults({
  preserve: "admin"
})

That means there's an issue with your cy.visit() command. The page is not being loaded before the test that's why

Thank you for the help everyone! With your suggestions, I was able to translate what I needed to write in Cypress.io to make this idea work and it came down to writing this inside of the commands.js file in the support directory:

Cypress.Commands.add('getDataE2EID', function (id) {
  return cy.get(`[data-e2e="${id}"]`)
})

cy.getDataE2EID('first-div-element') <--- will get me the first div

Now, I can have a custom cypress function that allows me to pass in whatever value I want where the key is 'data-e2e'.

If you want to hit two endpoints in sequence, use .then() to chain the second one

cy.request({
  'method': 'POST',
  'url': `${Cypress.env('ampApiPrefixForExternalEndpoints')}/bid`,
  ...
}).then((res) => {
  // verify 1st endpoint
  expect(res.status).to.eq(200);
}).then(() => {
  // ensure sequential calling
  cy.request({
    'method': 'GET',
    'url': `${Cypress.env('ampApiPrefixForExternalEndpoints')}/read`,
    ...
  }).then((res) => {
    // verify 2nd endpoint
    expect(res.status).to.eq(200);
    ...
  })
})

There a number of ways to approach flaky tests. You can try these and check what suits best for your use case:

1.Test Retires easy and effective, just retry the execution automatically it something fails. Can be applied, globally using cypress.json or to a describe block or to a it block as well.

For it block:

  // `it` test block with custom configuration
  it('allows user to login', {
    retries: {
      runMode: 2,
      openMode: 2
    }
  }, () => {
    // ...
  })

For describe block:

// Customizing retry attempts for a suite of tests
describe('User bank accounts', {
  retries: {
    runMode: 2,
    openMode: 2,
  }
}, () => {
  // The per-suite configuration is applied to each test
  // If a test fails, it will be retried
  it('allows a user to view their transactions', () => {
    // ...
  }

  it('allows a user to edit their transactions', () => {
    // ...
  }
})

2.Adding .visible and click() before writing into the name field

it("Can fill out form and submit", () => {
    cy.get("#modal-button").click()
    cy.get("#modal-form").should("exist")
    cy.get("#form-name").should('be.visible') //making sure the name field is visible
    cy.get("#form-name").click() //clicking on the name field
    cy.get("#form-name").type("Mike Johnson")
    cy.get("#form-age").type("33")
    cy.get("#form-email").type("mj09@yahoo.com")
    cy.get("#submit-button").click()
})

3.Use timeouts instead of waits

cy.get("#form-name", {timeout: 10000}).type("Mike Johnson")

4.Use cy.intercept() to wait for the XHR request to finish execution. Here I am assuming that there is some unfinished XHR request after clicking the modal button that is causing the issue. If that is not the case, you can debug your tests to find out and apply intercept accordingly.

it("Can fill out form and submit", () => {
    cy.intercept('http://example.com/settings').as('getSettings') //Intercept the url that is triggered after clicking the modal button
    cy.get("#modal-button").click()
    cy.wait('@getSettings') //Wait till that request has finished execution
    cy.get("#modal-form").should("exist")
    cy.get("#form-name").type("Mike Johnson")
    cy.get("#form-age").type("33")
    cy.get("#form-email").type("mj09@yahoo.com")
    cy.get("#submit-button").click()
})

It is very difficult to test a situation where an action has not occured. With this type of assertion, you can really only say:

"The XHR request was not made within the 400ms that Cypress looked for this XHR request to have been made (or whatever you set your timeout to be)"

This doesn't really confirm that the XHR request was never called.

That being said, Cypress offers a way to retrieve all XHR requests made using the undocumented cy.state('requests'). You could check the length of that, filter them by alias, etc to probably determine what you want.

I'm not really sure why you are using a task instead of a function, but you can simply add a property to the arguments you pass to the task:

on("task", {
    "gmail:get-messages": async args => {
      // Use the credentials property or an empty string if none is provided
      const credentialType = args.credentials || '';

      const messages = await gmail_tester.get_messages(
        path.resolve(__dirname, `credentials${args.credentials}.json`),
        path.resolve(__dirname, `gmail_token${args.credentials}.json`),
        args.options
      );
      return messages;
    }

And when you call your task you simply pass in the credentials type:

cy.task('gmail:get-messages', { options: {}, credentials: 'client' });