How to use formChromeBetaAppPath method in Cypress

UPDATE: Now there's an NPM package for this

cypress-hmr-restarter - it listens to the websocket that webpack-dev-server uses to reload the page

npm install --save-dev cypress-hmr-restarter

in cypress/support/index.js:

// cypress/support/index.js
import 'cypress-hmr-restarter'

see https://github.com/cypress-io/cypress/issues/456#issuecomment-566499738

Older hacky solution:

You can add the following to cypress/support/index.js (or at the top of a spec file):

Cypress.on('window:before:load', (win)=>{
  const _consoleInfo = win.console.info
  win.console.info = function () {
    if (arguments[0].includes('App updated.')) {
      cy.$$('.restart', top.document).click()
    }
    return _consoleInfo.apply(win.console, arguments)
  }
})

This will work as long as you have webpack-dev-server info being printed to the console (there are no other hooks into the webpack reloading behavior I could find)

The $('.restart').click() is a hilariously simple way to trigger a test re-run

Alternatively, you could try this plugin which sets up its own watchers on your source files, and re-runs your tests when changes are detected: https://github.com/bahmutov/cypress-watch-and-reload

Thank you all. Cypress flow isn't 100% compatible with standard JS Promise (Wait for an own function (which returns a promise) before tests are executed). After relentless testings, I decided to use a Cypress Custom Command wrapper to wrap my in-house JS library. Though adding an extra layer may seem a little cumbersome. But I am satisfied with the result. Share my code here in case anyone might need it. :)

Cypress Code

  before('Prepare TestPlanId', () => {
    cy.getTestPlanIdByName(testPlanName)
    .then((result) => {
      testPlanId = result
      console.log("#01_SDET_testplan:Prepare TestPlanId# "+testPlanId)
    })
  });

Cypress Custom Command

Cypress.Commands.add('getTestPlanIdByName', (wk_testplan_name) => {
  return new Cypress.Promise((resolve, reject) => {
    TESTPLAN_API.getTestPlanIdByName(wk_testplan_name)
    .then(function (data) {
      resolve(data);
    })
  });
})

In-house JS library

export async function getTestPlanIdByName(wk_testplan_name){

  return new Promise((resolve, reject) => {
      config.method = 'get'
      config.url = '/test/plans?api-version=5.0'
      let found = ''

      axios.request(config).then( resp => {
        found = resp.data.value.find(function(item, index, array){
          return item.name === wk_testplan_name
        })
      })
      .then(() => {
        resolve(found.id)
      })
      .catch(err => console.log(err))
  })
}

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

In /cypress/support/index.ts, add dayjs to the global Cypress (just like momentjs used to be included).

/cypress/support/index.ts

const dayjs = require('dayjs')

declare namespace Cypress {        
  interface Cypress {
    dayjs: dayjs.Dayjs;
  }
}

Cypress.dayjs = dayjs

Now const myDate = Cypress.dayjs('11-11-2022', 'dd-MM-YYYY') should work.

This looks like the culprit cy.get('table#return-request-list').find('tr').eq(1). You get the row you want to delete, you delete it, then you wrapping the delete row element even though it does not exist. So it will return undefined. You should instead get all rows initially.

function deleteTheNewestRequest(){
    // get all rows in table
    cy.get('table#return-request-list').find('tr').then( rows => {
        // get last row and store rowId
        cy.wrap(rows).last().find('td').first().invoke('text').as('deletedRowId')
        cy.wrap(rows).last().find('a[title="Delete"]').click()
        cy.get('button.btn-delete-return-request').click()
        // check new last row does not have same rowId
        cy.wrap(rows).last().find('td').first().should('not.have.text', this.rowId)
    })
}

Steps to install cypress:

Step 1: Create your project folder, go inside the folder from the terminal using cd folder_path/folder_name and run npm init. This will create your package.json file inside your project folder. You can do this in a sperate project or create some folder in your development project and do it there as well.

Step 2: Now, Run the command npm install cypress --save-dev. This will add the cypress as a dev dependency inside your package.json file. Once you have successfully installed this, you should see one more file package-lock.json and an folder node_modules being created

Step 3: Run the command node_modules/.bin/cypress open or node_modules/.bin/cypress run to run cypress.

Try this one:

In cypress.json

{
  "env": {
    "EXTERNAL_API": "https://jsonplaceholder.typicode.com/todos/1"
  }
}

In support/commands.js

Cypress.Commands.add('logInAs3', (Useremail, Userpwd, TMURL) => {
  cy.request({
    method: 'POST',
    url: `${Cypress.env('EXTERNAL_API')}/loginWithToken`,
    body: {
      user: {
        email: Useremail,
        password: Userpwd,
      }
    }
  })
    .its('body')
    .then((body) => {
      window.localStorage.setItem('accessToken', body.data.data.accessToken);
      window.localStorage.setItem('refreshToken', body.data.data.accessToken);
    })
});

Inside your test

beforeEach(() => {
  cy.logInAs3()
})

it('check localStorage token', () => {
  cy.visit()
  expect(localStorage.getItem('accessToken')).not.null
  expect(localStorage.getItem('refreshToken')).not.null
})

To use .within() you need to navigate up with a parents command

const AudienceResourceText = ["Undefined", "Manager", "Operator", "Minor"];

cy.get("li[class='cdk-drag item container-fluid'] span[class='form-control']")
.each((item, index, list) => {
  cy.wrap(item)
    .should("contain.text", AudienceResourceText[index])   // subject is span
    .parents('.row')                                       // subject is div.row
    .within(() => {                         
      cy.get('span.colour-select')                         // gets the color-picker
        .should('have.css', 'color', 'rgb(0, 0, 0)')       // check the color
    })
})

You can use .shadow() to access the shadow DOM.

cy.get('pds-radio')
  .shadow()
  .find('.radio')
  .should('have.class', 'active')

Alternatively, you could include the includeShadowDom option in the find command.