How to use setBrowsers method in Cypress

Cypress requires the ability to run its GUI. Depending on your Windows version, you likely need some additional configuration in order to run GUI applications in WSL:

• For all Windows releases, make sure you install the required dependencies:

  apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
  

  This may have been done for you depending on how you installed Cypress. I used the npm directions in the Cypress doc.

• Windows 11 includes the WSLg feature by default, which allows you to run GUI applications directly on Windows. If you upgraded from Windows 10 to Windows 11, run wsl --update to make sure you have the latest WSL version with WSLg.

  Also make sure, if you've attempted to run an X server on an older release (like in the next suggestion), that you remove any manual configuration of DISPLAY in your startup files (e.g. ~/.bashrc, etc.).

• For Windows 10, you will need to do some additional configuration. There are really two ways to do this, but it's a better topic for Super User (since it isn't directly related to programming), so I'm going to point you to this Super User question for some details. Either answer there is fine. While I'm partial to my solution, most people opt for running a third-party X server as in harrymc's answer there.

Just to make sure there weren't any "hidden tricks" needed to get Cypress running, I can confirm that I was able to successfully ./node_modules/.bin/cypress open using the Cypress instructions and my xrdp technique from the Super User answer.

Your test should work as is if the css is loaded as part of the page. I'm not sure where it resides, so it's hard to make suggestion on that, but if you are just practicing testing, you could just include it in the html like this:

<style>
  .disabled {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: lightgrey;
  }
</style>

in addition, you could also test if the class is being added

describe("empty spec", () => {
  it("submit new headline", () => {
    cy.visit("http://localhost:8080/");
    cy.get('input[name="text"]').type("hahahahhahhhhhhhhhhhhhhhh");

    cy.get("#login").should("have.class", "disabled"); // is disabled?
    cy.get(".button").click();
    cy.get("#login").should("not.have.class", "disabled"); // is enabled?
    cy.get("#login").click();
  });
});

but, obviously, that's checking whether the class is added, not whether the link is actually disabled

I've cobbled together the following commands which appear to work so far, but amazed there isn't on out-of-box solution:

Cypress.Commands.add('topIsWithinViewport', { prevSubject: true }, subject => {
  const windowInnerWidth = Cypress.config(`viewportWidth`);

  const bounding = subject[0].getBoundingClientRect();

  const rightBoundOfWindow = windowInnerWidth;

  expect(bounding.top).to.be.at.least(0);
  expect(bounding.left).to.be.at.least(0);
  expect(bounding.right).to.be.lessThan(rightBoundOfWindow);

  return subject;
})

Cypress.Commands.add('isWithinViewport', { prevSubject: true }, subject => {
  const windowInnerWidth = Cypress.config(`viewportWidth`);
  const windowInnerHeight = Cypress.config(`viewportHeight`);

  const bounding = subject[0].getBoundingClientRect();

  const rightBoundOfWindow = windowInnerWidth;
  const bottomBoundOfWindow = windowInnerHeight;

  expect(bounding.top).to.be.at.least(0);
  expect(bounding.left).to.be.at.least(0);
  expect(bounding.right).to.be.lessThan(rightBoundOfWindow);
  expect(bounding.bottom).to.be.lessThan(bottomBoundOfWindow);

  return subject;
})

You need to actually install the preprocessor in your project, not just its peer dependencies: npm install --save-dev @cypress/webpack-preprocessor

Instead of putting the loop inside the test, you could put it in the outer space as following

var i = 0;
for (i = 0; i < 3 ; i++) {     
  describe('Verify "Login" is visible. Test: '+i, function() {
    it('finds the Login link in the header', function() {

      //Place code inside the loop that you want to repeat

    })
  })
}

The Result will be the following:

• Verify "Login" is visible. Test: 0
• finds the Login link in the header
• Verify "Login" is visible. Test: 1
• finds the Login link in the header
• Verify "Login" is visible. Test: 2
• finds the Login link in the header

Thanks to this post How to get the text input field value to a const and log that value in Cypress.io

I found the answer, it seems I should treat the datepiker input as a text input.

cy.get('input[name="Date"]').invoke('val').then((text) => {
    expect('08/05/2019').to.equal(text);
});

You can just read the fixture first

cy.fixture('login_incorrect.json').then(data => { // may not need it, but in case...

  cy.intercept('POST', '**/login', (req) => {
    const body = JSON.parse(req.body);
    if(body.password === 'wrongpassword') {
      req.reply(res => {
        res.statusCode = data.statusCode;     // data = closure from above
        res.body = data.body;
      })
    } else {
      // load a different fixture based on something, etc.
    }
  }).as('response');

})

Combined fixture

{
  "put-first-hash-here": { 
    statusCode: ...,
    body: ...
  },
  "put-second-hash-here": { 
    statusCode: ...,
    body: ...
  },
}

Test

cy.fixture('combined.json').then(data => { 

  cy.intercept('POST', '**/login', (req) => {
    const body = JSON.parse(req.body);
    const hash = md5(req.body);
    if(body.password === 'wrongpassword') {
      req.reply(res => {
        res.statusCode = data[hash].statusCode;
        res.body = data[hash].body;
      })
    } 
  }).as('response');

})

I don't know if there's a way to do it from the user interface, but you can use mocha methods to run only chosen tests by:

1. Replacing it with xit tests you want to omit
2. Using it.skip on tests you want to omit
3. Using it.only on single test you want to run

To skip entire context/describe suite use context.skip() or describe.skip() which are identical.

IMHO the cleanest way is not to use waits nor timeouts with get, this is kinda an antipattern.

I would recommend to use Cypress waitUntil command and use something like:

 cy.waitUntil(function() {
  return cy.get('element').should('not.exist');
 })

or depending on the app code you can use not.be.visible.