How to use checkValidServiceWorker method in Cypress

You can use the Cypress.config() command.

To get baseUrl value use Cypress.config().baseUrl or Cypress.config('baseUrl').

Before clicking the Place Order button you have to add a bit of wait, because the tests are executing really fast, so by the time the items are being deleted, the click happens, hence the click is not registered by the web page. So I have added a wait of 500 milliseconds and then its working.

it("Delete cart", function () {

    cy.visit("https://www.demoblaze.com/index.html")
    cy.get("a.list-group-item:nth-child(2)").click()
    cy.get("#tbodyid > :nth-child(1)").contains('$360')
    cy.get(":nth-child(1) > .card > .card-block > .card-title > .hrefch").click({ force: true })
    cy.get(".col-sm-12 > .btn", { timeout: 30000 }).click()
    cy.go(-2)
    cy.get("a.list-group-item:nth-child(3)", { timeout: 30000 }).click().click()
    cy.get(":nth-child(1) > .card > .card-block > .card-title > .hrefch", { timeout: 30000 }).contains('Sony vaio i5').click({ force: true })
    cy.get(".col-sm-12 > .btn", { timeout: 30000 }).click()
    cy.go(-2)
    cy.get("a.list-group-item:nth-child(4)", { timeout: 30000 }).click().click()
    cy.get(":nth-child(1) > .card > .card-block > .card-title > .hrefch", { timeout: 30000 }).click({ force: true })
    cy.get(".col-sm-12 > .btn").click()
    cy.get("#cartur").click()
    cy.get("#tbodyid > :nth-child(1) > :nth-child(4) > a", { timeout: 30000 }).click({ multiple: true }, { force: true })
    cy.get("#tbodyid > :nth-child(1) > :nth-child(4) > a", { timeout: 30000 }).click({ multiple: true }, { force: true })
    //cy.get(".success > :nth-child(4) > a", {timeout: 30000}).click({multiple: true}, {force:true})
    //The above line is not working for me hence I commented it out

    //Your Answer
    cy.wait(500)
    cy.get(".col-lg-1 > .btn").click({ force: true })
    cy.get('#orderModalLabel').contains('Place order')
    cy.get('#name').click().type('Test')
    cy.get('#country').type('Test')
    cy.get('#city').type('Test')
    cy.get('#card').type('1234 1234 1234 1234')
    cy.get('#month').type('Mar')
    cy.get('#year').type('2021')
})

Execution result:

OR, A better approach if you don't want to use cy.wait() would be to intercept the POST Delete Request and wait till it is executed.

it("Delete cart", function () {
    cy.visit("https://www.demoblaze.com/index.html")
    cy.get("a.list-group-item:nth-child(2)").click()
    cy.get("#tbodyid > :nth-child(1)").contains('$360')
    cy.get(":nth-child(1) > .card > .card-block > .card-title > .hrefch").click({ force: true })
    cy.get(".col-sm-12 > .btn", { timeout: 30000 }).click()
    cy.go(-2)
    cy.get("a.list-group-item:nth-child(3)", { timeout: 30000 }).click().click()
    cy.get(":nth-child(1) > .card > .card-block > .card-title > .hrefch", { timeout: 30000 }).contains('Sony vaio i5').click({ force: true })
    cy.get(".col-sm-12 > .btn", { timeout: 30000 }).click()
    cy.go(-2)
    cy.get("a.list-group-item:nth-child(4)", { timeout: 30000 }).click().click()
    cy.get(":nth-child(1) > .card > .card-block > .card-title > .hrefch", { timeout: 30000 }).click({ force: true })
    cy.get(".col-sm-12 > .btn").click()
    cy.get("#cartur").click()

    //Intercept the Delete Request
    cy.intercept('POST', '/deleteitem').as('deleteitem')

    //Delete Item
    cy.get("#tbodyid > :nth-child(1) > :nth-child(4) > a", { timeout: 30000 }).click({ multiple: true }, { force: true })
    
    //Wait till the POST request is executed
    cy.wait('@deleteitem')
    
    //cy.get(".success > :nth-child(4) > a", {timeout: 30000}).click({multiple: true}, {force:true})
    //The above line is not working for me hence I commented it out

    //Your Answer
    cy.get(".col-lg-1 > .btn").click({ force: true })
    cy.get('#orderModalLabel').contains('Place order')
    cy.get('#name').click().type('Test')
    cy.get('#country').type('Test')
    cy.get('#city').type('Test')
    cy.get('#card').type('1234 1234 1234 1234')
    cy.get('#month').type('Mar')
    cy.get('#year').type('2021')
})

Execution result:

Everytime you define .route('VERB', '/endpoint', ...) it overrides your previous definition. The simplest solution would be to override this endpoint after you finish your first call

This test will work for you, Filip.

cy.route('POST', 'access-tokens', '@loginFailResponse', {status: 401}).as('loginFail')
cy.get("form input[type='email']").type("bad@email.com")
cy.get("form input[type='password']").type("Bad password")
// this should fail
cy.get("form").submit()
cy.route('POST', 'access-tokens', '@loginSuccessResponse').as('loginSuccess')
cy.get("form input[type='password']").type("g00d@password.com")
// this should let me in
cy.get("form").submit()

At last, I have figured out the answer.
I have added the below code in the wrong location and that was the reason it fails and returned the above error.
Now I have corrected the location and added under plugins/index.js and works perfectly.

I've also made a small change, ie I added return null since I didn't have anything to return in my case.

// In my spec file;

cy.task('copycsvFile');

// added below code under.. /plugins/index.js

const fs = require('fs');
    
module.exports = (on) => {
  on("task", {
    copycsvFile: (Obj) => {
      var fs = require("fs");
      fs.createReadStream(
        "C:/Users/SomeName/Downloads/Export_Survey_CSV.csv"
      ).pipe(
        fs.createWriteStream(
          "C:/User/Client/Client - Cypress Web UI Tests/cypress/fixtures/Export_Survey_CSV.csv"
        )
      );
      return null;
    },
  });
};

To repeat up to, say 10 pages, wrap the request in function that calls itself until found

function getAllUsers(onResponse, page = 0) {

  if (page === 10) throw 'User not found'

  cy.request(`https://jsonplaceholder.typicode.com/users?page=${page}`)
    .then(response => {
      const found = onResponse(response)
      if (found) return
      getAllUsers(onResponse, ++page)           // repeat for next page
    })
}

getAllUsers(response => {
  expect(response.status).to.eq(200);
  const users = response.body.data;
  return users.some(user => { return user.email === userToAdd.email })
})

You may have to modify this depending on what happens after all pages have been read and the user has not been found

Say there are 5 pages of users, if https://jsonplaceholder.typicode.com/users?page=6 returns

• status !== 200
• response.body === undefined or response.body.data === undefined

getAllUsers(response => {
  const statusOk = response.status === 200;
  const users = response?.body?.data;         // optional chaining
  return statusOk && users && 
    users.some(user => { return user.email === userToAdd.email })
})

This will return false for those edge condition, and eventually the test will fail at page 10.

The following snippet should work for you. I copied/pasted it from @izaacdb's post in this thread.

cy.wait(5000)
cy.get('.__PrivateStripeElement > iframe').then($element => {

  const $body = $element.contents().find('body')

  let stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(0).click().type('4242424242424242')
  stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(1).click().type('4242')
  stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(2).click().type('424')
})

However, in order for the above to work, you need to do the following (copied/pasted from @nerdmax's post from the same thread linked above):

Big Thanks to @Vedelopment @brian-mann !

I tested with react-stripe-checkout component and it works.

Just add some solution details so it may save others some time.

chromeWebSecurity disable:

// cypress.json

{
  "chromeWebSecurity": false
}

--disable-site-isolation-trials:

Check: https://docs.cypress.io/api/plugins/browser-launch-api.html# AND #1951

// /plugins/index.js

module.exports = (on, config) => {
  on("before:browser:launch", (browser = {}, args) => {
    if (browser.name === "chrome") {
      args.push("--disable-site-isolation-trials");
      return args;
    }
  });
};

There's some examples in the documentation, for example

cy.request('POST',"localhost:8080", {...})
  .its('body').should('include', 'HELLO WORLD%')

An live example for @jjhelguero

cy.request({
  method: 'POST',
  url: 'https://jsonplaceholder.typicode.com/posts',
  body: "Hello World", 
  header: "Content-Type:application/json"
})
.its('body')
.should('have.property', 'id', 101)

You should be able to load your profile.json with the require statement.

const data = require('profile.json');

The content of your callback have some asynchronous commands inside, so you need to treat the return value asynchronously as well.

Here's three versions of similar code using Cypress example.json and public site example.com.

Synchronous then() callback

cy.visit('http://example.com');
cy.fixture('example')
  .then(exampleData => {
    const name = exampleData.name  
    return name
  })
  .then(name => {
    expect(name).to.eq('Using fixtures to represent data')    // passes
  })

Asynchronous then() callback

cy.visit('http://example.com');
cy.fixture('example')
  .then(exampleData => {

    let name

    // Dummy async call where result is set internally
    cy.get('h1').then(() => {
      name = exampleData.name  
    })
    
    return name     // returns too soon!!
  })
  .then(name => {
    expect(name).to.eq('Using fixtures to represent data')   // fails
  })

Asynchronous then() callback with async result handling

cy.visit('http://example.com');
cy.fixture('example')
  .then(exampleData => {
    let name

    return cy.get('h1').then(() => {     // return this line so that test waits 
      return name = exampleData.name     // return internal data result
    })

  })
  .then(name => {
    expect(name).to.eq('Using fixtures to represent data')   // passes
  })