Javascript Cypress JS如何捕捉弹出式表单

我试图使用cy.get在弹出的表单中选择一个元素，该元素包含名称、姓氏等，但cypress会自动将其关闭。我尝试使用window:alert或双击{force:true}，但没有成功

期望的结果：我按下PlaceOrder按钮，它会打开一个带有填充字段的表单，我可以进一步使用它

/// <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.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 }
    );
    cy.get('.col-lg-1 > .btn').click({ force: true });
    cy.get('#totalm').contains('Total:');
    cy.get('#name').type('Test');
  });
});

---

在单击PlaceOrder按钮之前，您必须添加一点等待，因为测试执行得非常快，所以在删除项目时，会发生单击，因此该单击不会被网页注册。所以我增加了500毫秒的等待时间，然后它就开始工作了

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

执行结果：

或者，如果您不想使用cy.wait，更好的方法是拦截删除后请求并等待它执行

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

执行结果：

---

请不要在测试中添加任意等待

相反，确认页面上的文本的方式与用户相同

尝试使用cy.containstext或cy.containsselector文本，而不是cy.getselector.containstext。他们更擅长等待加载文本

在页面重新加载的点上执行此操作，其中Cypress日志具有“xhr”条目。这会阻止测试以网页无法更改的速度继续进行

赛维isithttps://www.demoblaze.com/index.html cy.containsPhones.click cy.containsSamsung galaxy s6.点击 cy.containsAdd to cart.click 点击 cy.lapptops.click cy.包含“索尼vaio i5”。单击 cy.containsAdd to cart.click 点击 cy.containsMonitors.click 包含“Apple monitor 24”。单击 cy.containsAdd to cart.click cy.getcartur.click //确认购物车页面已加载 cy.get'table'。应'contain'，'Samsung galaxy s6' cy.get'table'。应'contain'，'Sony vaio i5' cy.get'table'。应'contain'，'Apple monitor 24' cy.包含“tr”、“三星galaxy s6” .children。包含“删除”。单击； cy.get'table'。不应'not.contain'，'Samsung galaxy s6' cy.包含“tr”、“索尼vaio i5” .children。包含“删除”。单击； cy.get'table'。不应'not.contain'，'Sony vaio i5'； cy.包含'tr'，'Apple monitor 24' .children。包含“删除”。单击； cy.get'table'。不应'not.contain'，'Apple monitor 24' cy.包含“按钮”、“下订单”。单击 包含“标签”、“名称” //在这里测试表单

---

您能否也包括您的HTML或可复制的示例？@konekoyahttps://www.demoblaze.com/index.html 是面向公众的。