How to use createDevServer method in Cypress

You can use what JavaScript has to offer:

const date = new Date('12/14/2020');

so in the context of Cypress:

it("Check date to be less or equal than today", () => {
    cy
      .get('.date', { timeout: 15000 })
      .invoke('text')
      .then(dateText => {
        const date = new Date(dateText);
        const today = new Date();
        
        expect(date).to.be.lte(today);
    });
});

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)
})

Actually your entire app and the modal window is contained inside an iframe whose id="ctl00_secframe". So you need to make use of Iframe in cypress to close the Privacy window as well as to fetch other elements.

You can also refer : https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/

To get the table containing "Party B", specify the selector inside .contains()

cy.contains('div.table', 'Party B')  // returns the table with "Party B" inside somewhere 
  .find('div.text')                  // find the 2nd child which has class "text"
  .click()

There are variations you could use, if you know "Text B" is the actual text

cy.contains('div.text', 'Text B')
  .click()

If you want to navigate first to div[class="table"], then to div[class="label"]

cy.contains('Party B')               // returns the <span> owning "Party B" 
  .click()
  .parent('div.label')               // go up to div[class="label"]
  .sibling('div.text')               // go to next element at that level
  .click()

Be careful about doing multiple clicks in a chain, usually they have side-effects.

It's better to start a new chain after each click.

The class swal2-container is not the only class on the element you seek, so an exact match does not work.

Add a wildcard to the attribute match

it('Get content of popup', () => {
  cy.get('[id="popup_trigger_button"]').click()
  cy.get('class*="swal2-container"]')
}) 

or use the more conventional (partial) dot selector

it('Get content of popup', () => {
  cy.get('[id="popup_trigger_button"]').click()
  cy.get('.swal2-container')
}) 

This test runs against the SweetAlert2 demo page

it('works with partial attribute selector', () => {
  cy.visit('https://sweetalert2.github.io/')
  cy.contains('button', 'Show success message').click()
  cy.get("[class*='swal2-container']")                    // passes
})

And this

it('works with class selector', () => {
  cy.visit('https://sweetalert2.github.io/')
  cy.contains('button', 'Show success message').click()
  cy.get('.swal2-container')                              // passes
})

But his one fails because the class is incorrectly specified

it('works with partial attribute selector', () => {
  cy.visit('https://sweetalert2.github.io/')
  cy.contains('button', 'Show success message').click()
  cy.get("[class='swal2-container']")                    // fails
})

Actually you want

• .invoke('html') to get .innerHTML
• .invoke('text') to get .innerText
• .invoke('val') to get the value property of an <input>

You can get the window object with cy.window() and then build your assertion checking if the scrollY equals what you expect.

Something like this should test if the scroll is between 300 and 500 pixels from the top (the first argument of closeTo specifies the value you want and the second is the margin of error you want to accept):

cy.window().then(($window) => {
  expect($window.scrollY).to.be.closeTo(400, 100);
});

Without code it's very difficult but it sounds to me like you have dynamic ids so try using selectors that will pick the elements despite the ids changing every time your test runs.

It's recommended (when you can) to ask the devs to have a dedicated attribute to avoid this kind of stuff happening but when you can't, there are other ways.

Here's a link to cypress best practices to select elements and isolate them

https://docs.cypress.io/guides/references/best-practices#Selecting-Elements

You can achieve what you want using the chai-colors assertion plugin.

Install as follows:

npm install chai-colors

Then add this to your code:

import chaiColors from 'chai-colors'
chai.use(chaiColors)

Or this, as applicable:

var chaiColors = require('chai-colors');    
chai.use(chaiColors);

Now you can write your assertion like this:

cy.get('#button-login')
  .should('have.css', 'background-color')
  .and('be.colored', '#6a7ba3')