How to use hasOnly method in Cypress

It looks like you have missed the install of cypress-xpath.

If you are installing with npm:

npm install -D cypress-xpath

or if you are installing with yarn:

yarn add cypress-xpath --dev

You clearly already have the the require statement in \cypress\support since that is the first path in the error stack.

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

Maybe this can be useful to you:

describe('UsersComponent',  () => {
  it('changeStatus function is called', async () => {
    const wrapper = mount(UsersComponent, {
      mounted: vi.fn(), // With this you mock the onMounted
      global: {
        plugins: [createTestingPinia({
          initialState: { // Initialize the state
            users: { status: 'ready' }, 
          }
        })]
      }
    })  
  
    // Spy the method you call...
    const spy = vi.spyOn(wrapper.vm, 'changeStatus');

    wrapper.vm.changeStatus()

    expect(spy).toHaveBeenCalled()
    expect(spy).toHaveBeenCalledTimes(1)
  })
})

EDIT:

I think you could pass your variables with a JSON and then you can access them as a normal javascript object.

Example:

$(npm bin)/cypress run --env token='{"a":"5", "b":{"c":"x"}}'

Now in your spec, if you call Cypress.env('token') you'll get this object as output.

If you want the enviroment variable as an array, you could pass it this way:

$(npm bin)/cypress run --env token='["a", "b"]'

Output:

If I understood the question correctly, you should pass the variables in the form:

cypress run --env name1=value1,name2=value2,...

Example:

cypress run --env host=kevin.dev.local,api_server=http://localhost:8888/api/v1

This will create two environment variables, host with value kevin.dev.local and api_server with value http://localhost:8888/api/v1.

yarn internally uses sh to execute the commands given in the scripts (cmd in case of windows) - Source. This is very similar to what npm does as well.

Here && is handled by a shell, so your command yarn percy:local && yarn start:server percy:exec is run as 2 separate child processes. This means yarn percy:local runs in a process and sets the env variables as desired in its context but the second process which is running yarn start:server percy:exec has no idea about the env variables set by process 1.

Lets see how OS X handles this:

1. With &&

sh -c 'PERCY_TOKEN=asdfasdf; PERCY_BRANCH=local' &&  sh -c 'echo $PERCY_TOKEN'

This prints nothing

2. Without &&

sh -c 'PERCY_TOKEN=asdfasdf; PERCY_BRANCH=local echo $PERCY_TOKEN'

This prints asdfasdf

I think removing the && in the cy:percy:local should fix your issue.

Edit: Solution for your particular situation as discussed in comments

As explained in the 2nd point of this answer: stackoverflow.com/a/37141993/8266093 I would suggest you run this script in the format ENV_KEY1=value1 ENV_KEY2=value2 command which in your case becomes PERCY_TOKEN=$(grep 'PERCY_TOKEN.*' .env | sed 's/.*=//') PERCY_BRANCH=local yarn percy exec cypress run. Along with this, you can add your start-server yarn command as well if running it separately is not a solution for you.

Depending on where you're executing your assertion, and due to Cypress' asynchronous nature, you may be trying to assert before expectedTimeOfTest is actually being assigned a value. You have one of two options:

1. Instead of a variable, assign expectedTimeOfTest to an alias: cy.wrap(JSON.stringify(json.SEQUENCE.timeoftest)).as("expectedTimeOfTest"); which you can then access by its alias as either this.expectedTimeOfTest or cy.get("@expectedTimeOfTest") later in your test.

If you go this route, do not use the arrow function for your then method, as aliases won't work with them. Instead use .then(function(){ //your code here})

     // Example of using function() vs arrow function.      
     cy.readFile(filePath + fileName).then(function(json){
        expect(json).to.be.an('object')
        cy.wrap(JSON.stringify(json.SEQUENCE.timeoftest)).as("expectedTimeOfTest");
      }); 

2. Include your assertion inside your .then() method.

Cypress has wait method, which will wait for given time. For more info here

Example:

(async function doWaitForDialogOpen() {
    await cy.wait(4000) // waits 4 seconds
    const $iframe = await cy.get('#iframeID0')
    Cypress.$($iframe)
   .find('html')
   .find('body')
   .find('#someId')
   .find('input')
   .type(100);
  // Do your next steps
 })();

Using the Plaid demo page as a test app and following the steps in Working with iframes in Cypress, I managed to get a consistently working test.

From the blog, I used this sequence to ensure the iframe body has fully loaded

iframe -> body -> should.not.be.empty

The page loads a placeholder first while is waits for a GET request to complete, so just getting a loaded iframe body is not sufficient.

placeholder

<p>iframe placeholder for https://cdn.plaid.com/link/v2/stable/link.html?isLinkInitialize=true&origin=https%3A%2F%2Fplaid.com&token=link-sandbox-170bce6a-fe90-44a4-8b8a-54064fbc8032&uniqueId=1&version=2.0.917</p>

We need to wait for the "Continue" button, which takes a bit of time to show so give it a long timeout.

Using .contains('button', 'Continue', { timeout: 10000 }) actually returned two button, although there is only one visible.

I changed the button selector to use an id and all works consistently.

The test

cy.visit('https://plaid.com/demo/?countryCode=US&language=en&product=transactions');

cy.contains('button', 'Launch Demo').click()

cy.get('iframe#plaid-link-iframe-1', { timeout: 30000 }).then(iframe => {

  cy.wrap(iframe)                   // from Cypress blog ref above
  .its('0.contentDocument.body')
  .should('not.be.empty')           // ensure the iframe body is loaded
  .as('iframeBody')                 // save for further commands within iframe.body

  //.contains('button', 'Continue', { timeout: 10000 })     // returns 2 buttons!

  .find('button#aut-continue-button', { timeout: 10000 })   // this is the best selector

  .click()

  cy.get('@iframeBody')
    .contains('h1', 'Select your bank')  // confirm the result of the click()


})

Due to the asyncronous nature of Cypress the map must be loaded before the test continues, this is how I solved it:

    // Add in this get method which will wait until load
    cy.get(".ol-viewport");

    cy.window().then(win => {
        const layers = win.olMap.getLayers().getArray();
        console.log(layers); // Displays list of layers
    });