How to use RouterPage method in Cypress

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

Friends

Firstly, Thanks for all your time & suggestions.

I have found the work around to trigger the mouseover event and show the bootstrap submenu. without using the { force: true }.

Solution that I implemented. Appreciated if anyone finds different and better solution. Please do share.

Cypress.$($elem[0]).siblings("ul").show();

Using this I have manually makes the ul to show first and then execute the click event of the submenu. For this I have tried

Cypress.$($elem[0]).hover(false, false);
Cypress.$($elem[0]).mouseover();
Cypress.$($elem[0]).trigger("hover");
Cypress.$($elem[0]).trigger("mouseover");

but above commands didn't work. So I move to manually trigger the hide/show event of jquery.

Using functions to encapsulate each number is fine, but remember that commands inside are still asynchronous, and they are not returning numbers, they are returning Chainers.

If you did it without functions, this is what it would look like

cy.get('[data-cy="jobSummaryActiveJobsStatTitle"]>h1')
  .invoke('text').then(parseInt).as('actnum')
  .then(actnum => {

    cy.get('[data-cy="jobSummaryPausedJobsStatTitle"] > h1')
      .invoke('text').then(parseInt).as('pasnum')
      then(pasnum => {
 
        const totaljobs = actnum + pasnum
        cy.log(totaljobs)
      })
  })

so with functions you need to repeat that pattern

function add() {
   activejobnumber().then(actnum => {
     pausedjobnumber().then(pasnum => {
       const totaljobs = actnum + pasnum;
       cy.log(totaljobs);
     })
  })
}

or take advantage of the alias for each number

function add() {
  activejobnumber()
  pausedjobnumber()

  // wait for above async calls to finish
  cy.then(function() {          
    const totaljobs = this.actnum + this.pasnum;
    cy.log(totaljobs);
  })
}

Use cy.request rather than fetch.

https://docs.cypress.io/api/commands/request

cy.request({yourUri}).as("response"); // This takes care of the async task. 
 
cy.get("@response").should((response) => { 
   // Carry on with the rest of your test
   cy.get("some selector");

});

I've encountered this issue myself and we've tried many different things at work on our app. Even though it's something which needs to be adapted, we're quite happy with our current solution.

But before I get to the solution, let me explain why this is a hard problem to solve without simply having a long wait before we start testing.

First of all, we need to wait for our page to be ready. Luckily for us, Cypress does that for us.

Then, we could wait for Angular to be bootstraped. One way of being aware of that is by checking if getAllAngularRootElements is available on the window object. And yes this function is apparently there even in prod mode!

  cy.window()
    .its('getAllAngularRootElements' as any)
    .should('exist');

But this isn't a perfect solution especially if... You use lazy loading.

Just because Angular bootstraped your app doesn't mean all your lazy modules are loaded! And this is where it gets really unlikely to find an automatic way of waiting for exactly what you want to be ready.

So how do we start testing as soon as we can and in a safe way? In my opinion the best option to do so is to have a check after every cy.visit call and wait for one element around what you're about to test, to exist. Example:

cy.visit(`some-page`);

cy.get(
  '.some-class-around-what-I-want-to-test',
  { timeout: 15000 }
).should('exist');

// ... rest of the test goes here

The code above will load the page, wait for the element you're targetting to exist for a maximum of 15 seconds but the important thing to note is that as soon as this element is available, it'll consider that check successful and move on. So if your app takes 2 seconds to display that element, your tests will starts straight after!

If you want to make it less repetitive for all your tests, you can create a function to open a given page and wait for its content to be there before doing something else. Example:

// at the top of the test file
const openProfilePage = () => {
  cy.visit('profile');
  cy.get(
    '.profile',
    { timeout: 15000 }
  ).should('exist');
}

// in every tests after or in a before each
openProfilePage();

// test something else

You should add a cy.get() for something that only appears after the page load is finished,

cy.bookspanel = {
  getBookNavigationTab: function () {
    cy.get('a > span').contains("Books").click();
    cy.contains('h2', 'Heading that displays after page is loaded');  
    // Will not run next command until above heading appears.
  }
}

or pass to the function as a parameter if it changes on each page

cy.bookspanel = {
  getBookNavigationTab: function (myContent) {
    cy.get('a > span').contains("Books").click();
    cy.contains(myContent);  
    // Will not run next command until above content appears.
  }
}

cy.bookspanel.getBookNavigationTab('Heading that displays after page is loaded');

I guess you have to understand that Cypress commands run asynchronously from the javascript in the test.

Move the .type() inside the .then() so it happens after you modify the value

let bankBranch = 'Base Data';

cy.get("#bankBranch").then($el => {
  bankBranch = bankBranch.replace(/\s+/g, '+');
  cy.wrap($el).type(bankBranch)
})

There are other refactors, I recommend playing around.

// replace the space early
let bankBranch = 'Base Data'.replace(/\s+/g, '+')

cy.get("#bankBranch")
  .type(bankBranch)

let bankBranch = 'Base Data';

cy.get("#bankBranch").then($el => {
  bankBranch = bankBranch.replace(/\s+/g, '+');
  // pass on the element
  return $el
}).then($el => {
  // deferring the .type() command
  cy.wrap($el).type(bankBranch)
})

You may have noticed the polite discussion about dismissing the popups, is it necessary or not.

I believe not, and to rely on dismissing the popups will give a flaky test.

I also think the issue is as @DizzyAl says, the event handler on the dropdown button is not attached until late in the page load.

This is what I tried, using retries to give a bit more time for page loading.

Cypress.on('uncaught:exception', () => false)

before(() => {
  cy.visit('http://mercadolibre.com.ar')
  cy.get(".nav-search-input").type("scanner bluetooth para auto{enter}");
  cy.get('.ui-search-result__wrapper')  // instead of cy.wait(3000), wait for the list
})

it('gets the dropdown menu on 1st retry', {retries: 2}, () => {

  // Don't dismiss the popups

  cy.get('button.andes-dropdown__trigger').click()
  cy.contains('a.andes-list__item', 'Menor precio').click()

  // page reload happens
  cy.contains('.ui-search-result__wrapper:nth-child(1)', '$490', {timeout:20000})
});

Maybe you can leverage Cypress.$. Please note however that the documentation doesn't precisely advertise it as a testing tool:

This is a great way to synchronously query for elements when debugging from Developer Tools.

Anyhow, I believe something along this line will yield the value you expect:

selector = 'div[data-cy-type="group-component"]:first select[name=group_id] option'
count = Cypress.$(selector).length