How to use firefoxUtil.setupFoxdriver method in Cypress

You can simply click somewhere on the body:

Cypress.Commands.add('clickOutside', function(): Chainable<any> {
  return cy.get('body').click(0,0); //0,0 here are the x and y coordinates
});

In test:

cy.get('[data-test-id="popover-container"]').clickOutside();

click reference

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.

According to this post, and according to cypress suggestions for custom commands and page objects I suggest the next custom command:

Cypress.Commands.add("validateIfElementExistsInDom", (selector) => {
    cy.get('body')
        .then($body => {
            expect($body.find(selector).length > 0).to.be.true
        })
    
})

And you can use it in the test like :

cy.validateIfElementExistsInDom(fieldName)
    

And a general return boolean function example:

Cypress.Commands.add("validateIfElementExistsInDomAsBoolean", (selector) => {
   return cy.get('body')
        .then($body => {
            return cy.wrap($body.find(selector).length > 0) //Cy wrap is needed so the function is chainable
        })
})

//in test code
cy.validateIfElementExistsInDomAsBoolean(fieldName)
    .then(boolean => expect(boolean).to.be.true)

I stuck with similar issue using cy.scrollTo() on an Angular app with a lot of animation. Cypress proceeds to next commands before the scrolling is finished. I tried many combinations and found adding following options/values worked. These options can be used in scrollIntoView() too:

• easing (the easing animation): linear
• duration (Scrolls over the duration (in ms)): 100

The actual code looklikes this

cy.scrollTo('bottom', { easing: 'linear',duration: 100 }).then(() => { 
    // commands need to be executed after the scrolling is finished
});

Since it works when the intercept is moved up in the command order, it seems that cy.waitLoading() triggers the POST and not cy.get('[data-cy=alreadysent-button]').

The intercept must always be set up before the trigger (page visit or button click).

But the intercept varies between tests, so instead of before() I would try setting up a helper function that is called at the top of each test.

const loadAndIntercept = (apiResult) => {     
  const apiFixture = apiResult ? 'test/alreadySent-true.json' : 'test/alreadySent-false.json';
  cy.intercept('POST', '**/test/alreadySent', { fixture: apiFixture }).as('alreadySent');
  cy.waitLoading();
})

it('false test', function() {
  loadAndIntercept(false);
  cy.wait('@alreadySent');
  cy.get('[data-cy=alreadysent-button]');
});

it('true test', function() {
  loadAndIntercept(true);
  cy.wait('@alreadySent');
  cy.get('[data-cy=alreadysent-button]');
});

This should work since intercepts are cleared between tests. Ref docs - intercept

Note: all intercepts are automatically cleared before every test.

Put it in a variable first, then use the variable in the Cypress call.

const body = {
  "address": Random.address,
  "address_complement": Random.address_complement,
  "address_city": Random.address_city,
  "address_number": `${Random.address_number}`,
  "address_district": Random.address_district,
  "address_state": Random.address_state,
  "cep": `${Random.cep}`,
  "cnpj": Random.cnpj,
  "company_name": Random.company_name,
  "headquarters": fAffiliate.headquarters[1],
  "ie": `${Random.ie}`,
  "phone": Random.phone,
  "rntrc": `${Random.rntrc}`,
  "status": fAffiliate.status[0],
  "trading_name": Random.trading_name
};

cy.request({
  url: "/api/affiliate/create",
  method: "POST",
  headers: {
    Authorization: `bearer ${access_token}`,
  },
  body: body
})

Then you can use the body variable again for a second request.

I also would recommend e2e tests to check if your website and especially your javascript behaves like you'ld expect. There are a bunch of libraries you can use to do Webdriver tests in Javascript. Check out this stackoverflow thread: Headless Browser and scraping - solutions.

For instance in WebdriverJS you can easily chain several commands to navigate in the browser and get informations to test against. One of your scenarios could look like this (using Mocha):

describe("check if overlay pops up", function() {
  it("opens success overlay when I click on submit", function(done) {
    browser
      // show overlay
      .click(".btn_submit")
      .isVisible("#overlay", function(err,overlayIsOpen) {
        assert(err === null);
        assert(overlayIsOpen === true);
      })
      // hide overlay
      .click(".btn_ok")
      .isVisible("#overlay", function(err,overlayIsOpen) {
        assert(err === null);
        assert(overlayIsOpen === false);
      })
      .call(done)
  });

  // other tests
})

You will find a lot of other commands and examples on the project website. You can run these tests on several browser like Chrome, Firefox or even on mobile devices. Other popular libraries like Wd.js or Selenium-Webdriver are promise based and do more or less the same.

Ideally you want to be specific about the return value from each custom command.

However, Cypress will pick up the last command inside the custom command and return it's subject. But within firstCommand the last command is modifiesOtherAttr which does not have a return value or any cy command, so Cypress returns undefined which is then what firstCommand returns.

Since you create a new object aBody, it should be explicitly returned.

Cypress.Commands.add("firstCommand", (varA, objectB) => {
  let aBody = {};
  aBody.a = varA;
  cy.modifiesOtherAttr(aBody, objectB)
  cy.wrap(aBody)                         // this is the return value
});

Cypress.Commands.add("modifiesOtherAttr", (aBody, objectB) => {
  aBody.b = objectB.attrb  // "side effect" happens here, nothing returned
});

OR

Cypress.Commands.add("firstCommand", (varA, objectB) => {
  let aBody = {};
  aBody.a = varA;
  cy.modifiesOtherAttr(aBody, objectB)  // this is the return value
});

Cypress.Commands.add("modifiesOtherAttr", (aBody, objectB) => {
  aBody.b = objectB.attrb  
  cy.wrap(aBody)                         // this is the return value
});

Explicit is better

Cypress.Commands.add("firstCommand", (varA, objectB) => {
  let aBody = {};
  aBody.a = varA;
  cy.modifiesOtherAttr(aBody, objectB)  
  return cy.wrap(aBody)                         // this is the return value
});

Cypress.Commands.add("modifiesOtherAttr", (aBody, objectB) => {
  aBody.b = objectB.attrb  
  return cy.wrap(aBody)                         // this is the return value
});

I also did the following which also worked:

cy.wait('@redeemVoucher').should(({request, response}) => {
  expect(response.statusCode).to.eq(200);

  cy.request({
    method: 'POST',
    url: request.url,
    failOnStatusCode: false,
    headers: {
      'Content-Type': 'application/json; charset=utf-8'
    }}).should((response) => {
      expect(response.status).to.eq(400);
      expect(response.body.errors[0].message).to.eq('Voucher cannot be redeemed: ' + voucherCode);
  });
});