Cypress测试使用ajax请求自动完成输入

我正在尝试用cypress测试自动完成输入。当用户在输入中键入内容时，将发送一个ajax请求，并显示可用选项的列表。要点是cypress需要等待请求完成，否则将没有列表可供选择

下面的命令大部分时间都有效，但我正在寻找一个更好/高效的解决方案。该命令接受cypress要输入的元素和数据

Cypress.Commands.add("autocomplete", (element, data) => { 
    cy.get(element).type(data).then(()=>{
        cy.wait(2000) // waiting for ajax to complete
        cy.get(".selectize-dropdown-content .option")
        .contains(data)
        .click()
    })
})

---

与其等待，我建议使用

cy.intercept（）

，拦截请求，然后等待其得到解决

Cypress.Commands.add("autocomplete", (element, data) => {
  cy.intercept('POST', '/somepartofurl').as('ajaxreq') //check the endpoint that is being triggered in chrome dev tools and mention here
  cy.get(element).type(data).then(() => {
    cy.wait('@ajaxreq') //Wait till the request is resolved
    cy.get(".selectize-dropdown-content .option")
      .contains(data)
      .click()
  })
})

---

等待

cy.intercept（）

的另一种方法是等待列表包含搜索值

您的代码几乎可以正确执行此操作，但您需要为

cy.contains（选择器，数据）

切换

cy.contains（选择器，数据）

。后一个命令将重试，直到找到文本为止（因此它将等待请求填充列表）

您只有2秒的等待时间，这在Cypress应用的标准4秒重试时间内（否则添加超时选项以增加它）

Cypress.Commands.add（“自动完成”，（元素，数据）=>{
cy.get（元素）
.type（data）//键入数据可能不够
.trigger（'change'）//可能还需要触发更改事件
.然后（（）=>{
cy.contains（“.selectize dropdown content.option”，data）//在此自动重试
//直到列表被填充
。单击（）；
})
})

---

在这种情况下，

cy.intecept（）

有什么问题？

很多自动完成组件都内置了一些缓存，因此如果用户再次删除类型，那么ajax请求就不会再次发送

---

因此，有可能

cy.intercept（）

不会每次触发，这取决于您的测试场景有多复杂。

如果它发送AJAX请求，您是否可以使用

cy.intercept（）.as（'someAlias'）

然后

cy.wait（'someAlias'）

来完成AJAX调用？或者对AJAX请求的状态代码做些什么？