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:

Finding the card with name 'cypress' and clicking the edit button

cy.contains('.MuiCardContent-root', 'cypress').within(() => {
  cy.get('svg.MuiSvgIcon-root').eq(0)  // 1st button is edit
    .click()
})

I think this is because your form is using native form submit, but Cypress' cy.route() only responds to XHR calls (at the moment).

There is a big discussion in issue #170.

Gleb Bahmutov has an interesting idea in this comment, code in this repository. Essentially he 'mocks' the native submit with an XHR submit, on the fly.

I tried out a variation which gets closer to your scenario. Follow the repository READ.ME to set up the test, but first update the Cypress version in package.json. Add the file to be uploaded into /cypress/fixtures.

Then try the following spec.

The third test is an alternative which uses cy.url() instead of cy.route().

uploadFile command (or similar variation)

Cypress.Commands.add('uploadFile', (fileName, selector) =>
  cy.get(selector).then(subject => {
    return cy
      .fixture(fileName, 'base64')
      .then(Cypress.Blob.base64StringToBlob)
      .then(blob => {
        const el = subject[0];
        const testFile = new File([blob], fileName, {
          type: 'application/vnd.openxmlformatsofficedocument.spreadsheetml.sheet',
        });
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(testFile);
        el.files = dataTransfer.files;
        return subject;
      });
  })
);

Function to 'mock' the native submit with XHR (place at top of Spec)

const mockNativeSubmitWithXhr = (form$) => {
  let win
  cy.window().then(w => {
    win = w
  })
  form$.on('submit', e => {
    e.preventDefault()
    const form = new FormData(e.target)
    const XHR = new win.XMLHttpRequest()
    XHR.onload = response => {
      win.document.write(XHR.responseText)
      win.history.pushState({}, '', XHR.url)
    }
    XHR.open(e.target.method, e.target.action)
    XHR.send(form)
    return true
  })
}

Spec

describe('waiting for form-data post', () => {

  beforeEach(() => {
    cy.task('deleteFile', '../../uploads/Sample_data.xlsx')
    cy.visit('localhost:3000')
    cy.get('input[name="userid"]').type('foo@bar.com')
  })

  it('upload with native form submit (fails because of native event)', () => {
    cy.server()
    cy.route('POST', '/upload').as('upload');

    cy.uploadFile('Sample_data.xlsx', '[id=fileToUpload]')
    cy.get('input[type="submit"]').click()

    cy.wait('@upload');
    cy.readFile('uploads/Sample_data.xlsx') // check saved file
  })

  it('upload with form submit mocked to XHR send (succeeds)', () => {
    cy.server()
    cy.route('POST', '/upload').as('upload');

    cy.uploadFile('Sample_data.xlsx', '[id=fileToUpload]')
    cy.get('form').then(form => mockNativeSubmitWithXhr(form))
    cy.get('input[type="submit"]').click()

    cy.wait('@upload');
    cy.readFile('uploads/Sample_data.xlsx')
  })

  it('upload with native form submit (testing url has changed)', () => {
    cy.uploadFile('Sample_data.xlsx', '[id=fileToUpload]')
    cy.get('input[type="submit"]').click()

    cy.url().should('eq', 'http://localhost:3000/upload')
    cy.readFile('uploads/Sample_data.xlsx')
  })
})

Task to remove uploaded file between tests (modify '/cypress/plugins/index.js')

const fs = require('fs')

module.exports = (on, config) => {
  on('task', {
    deleteFile: (path) => {
      if (fs.existsSync(path)) {
        fs.unlinkSync(path)
      }
      return null
    }
  })
}

You can get videos/screenshots from Cypress in gitlab CI using artifacts, just make sure they are put inside the app's folder structure.

Example I'm working on right now which yields a downloadable screenshots folder:

e2e tests all:
  image: cypress/base:14.15.4
  stage: manual-tests
  when: manual
  allow_failure: true
  before_script:
    - npm install
    - npx cypress verify
  script:
    - npm run-script test:e2e
  cache:
    <<: *global_cache
    policy: pull
  artifacts:
    paths:
      - tests/e2e/screenshots/**/*.png
    expire_in: 2 hrs
    when: on_failure

This gets the screenshots folder in our VueJS app.

Cypress CI artifact examples here and general Gitlab artifacts info here.

I'm not really sure why you are using a task instead of a function, but you can simply add a property to the arguments you pass to the task:

on("task", {
    "gmail:get-messages": async args => {
      // Use the credentials property or an empty string if none is provided
      const credentialType = args.credentials || '';

      const messages = await gmail_tester.get_messages(
        path.resolve(__dirname, `credentials${args.credentials}.json`),
        path.resolve(__dirname, `gmail_token${args.credentials}.json`),
        args.options
      );
      return messages;
    }

And when you call your task you simply pass in the credentials type:

cy.task('gmail:get-messages', { options: {}, credentials: 'client' });

SOLVED

Do not include http(s):// within your reporterOptions in the cypress.json file

BAD:   "domain": "https://customName.testrail.io"
GOOD:  "domain": "customName.testrail.io"

In all fairness, it's called domain, not URL, so I removing https makes sense

You can customise your expectations with should(), and this will automatically retry your assertions for either the specified timeout, or the global defaultCommandTimeout if none provided. In your case I could probably imagine wrapping your object, specify a timeout and then passing your logic to should:

cy.wrap(someFunction, {timeout: 25000}).should(someFunction => expect(someFunction()).to.eq(someValue))

Read more here: https://docs.cypress.io/api/commands/should.html#Function

To force an arbitrary loop, I create an array with the indices I want, and then call cy.wrap

var genArr = Array.from({length:15},(v,k)=>k+1)
cy.wrap(genArr).each((index) => {
    cy.get("#button-" + index).click()
})

The text that you are getting is in string, you have to convert in into a Number (using parseInt) if you want to compare the two. And you can use this to access myAlias (As, under the hood, aliasing basic objects and primitives utilizes Mocha’s shared context object: that is, aliases are available as this.*)

cy.get('[data-cy=AmountAll]', {
    timeout: 15000
}).invoke('text').then((text) => {
    const amountAllBefore = parseInt(text.replace(/\D/g, '')) //this will only work if text.replace(/\D/g, '') returns a number but is string
    cy.wrap(amountAllBefore).as('myAlias')
})

cy.get('[data-cy=AmountAll]', {
    timeout: 15000
}).invoke('text').then((text) => {
    const amountAllAfter = = parseInt(text.replace(/\D/g, '')) //this will only work if text.replace(/\D/g, '') returns a number but is string
    expect(this.myAlias).to.be.greaterThan(amountAllAfter)
})