I am trying to use cy.get() to select an element on poped up form which contains Name, Surname etc, but cypress automatically closes it down. I've tried to use window:alert or double click with {force: true}, but it wasn't successful.

Desired result: I push "Place Order" button and it opens a form with fill fields which i can use further.

/// <reference types="cypress" />

// sometimes cypress cannot execute methods because element is detached from DOM. In this case need to restart test
describe('Categories test', function () {
  it('Delete cart', function () {
    cy.visit('.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 }
    );
    cy.get('.col-lg-1 > .btn').click({ force: true });
    cy.get('#totalm').contains('Total:');
    cy.get('#name').type('Test');
  });
});

I am trying to use cy.get() to select an element on poped up form which contains Name, Surname etc, but cypress automatically closes it down. I've tried to use window:alert or double click with {force: true}, but it wasn't successful.

Desired result: I push "Place Order" button and it opens a form with fill fields which i can use further.

/// <reference types="cypress" />

// sometimes cypress cannot execute methods because element is detached from DOM. In this case need to restart test
describe('Categories test', function () {
  it('Delete cart', function () {
    cy.visit('https://www.demoblaze./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 }
    );
    cy.get('.col-lg-1 > .btn').click({ force: true });
    cy.get('#totalm').contains('Total:');
    cy.get('#name').type('Test');
  });
});

• javascript
• forms
• popup
• alert
• cypress

• Could you also include your HTML or a reproducible example? – Joshua Commented Dec 17, 2020 at 5:38
• 1 @konekoya https://www.demoblaze./index.html is public-facing. – user14783414 Commented Dec 17, 2020 at 10:43

2 Answers 2

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./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 mented 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./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 mented 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:

Please don't add arbitrary waits to your test.

Instead, confirm text on the page the same way a user would.

Try to use cy.contains(text) or cy.contains(selector, text) rather than cy.get(selector).contains(text). They are better at waiting for loading text.

Do this at points where the page reloads (where the Cypress log has an '(xhr)' entry). This stops the test continuing faster than the web page can change.

  cy.visit("https://www.demoblaze./index.html")

  cy.contains("Phones").click()
  cy.contains("Samsung galaxy s6").click()
  cy.contains("Add to cart").click()

  cy.contains("Home").click()
  cy.contains("Laptops").click()
  cy.contains('Sony vaio i5').click()
  cy.contains("Add to cart").click()

  cy.contains("Home").click()
  cy.contains("Monitors").click()
  cy.contains('Apple monitor 24').click()
  cy.contains("Add to cart").click()

  cy.get("#cartur").click()
  // Confirm the cart page has loaded
  cy.get('table').should('contain', 'Samsung galaxy s6')
  cy.get('table').should('contain', 'Sony vaio i5')
  cy.get('table').should('contain', 'Apple monitor 24')

  cy.contains('tr', 'Samsung galaxy s6')
    .children().contains('Delete').click();
  cy.get('table').should('not.contain', 'Samsung galaxy s6')

  cy.contains('tr', 'Sony vaio i5')
    .children().contains('Delete').click();
  cy.get('table').should('not.contain', 'Sony vaio i5');

  cy.contains('tr', 'Apple monitor 24')
    .children().contains('Delete').click();
  cy.get('table').should('not.contain', 'Apple monitor 24')  

  cy.contains('button', 'Place Order').click()
  cy.contains('label', 'Name')

  // test the form here