赛普拉斯没有执行 "then" 部分

Question

我正在尝试编写一个自定义的 cypress 命令，但是我的 then 部分中的代码没有执行。任何帮助将不胜感激谢谢我的命令看起来类似于：

Cypress.Commands.add("ex", () => {
  const links=[]
  cy.get("*[class='link post']").each((link)=>{
    links.push(link.href)
  }).then(() => {
    var i=0;
    while (links[i]) {
      cy.visit(link)
      i++
    }
  })
})

Answer 1

这里有一些事情我们应该逐步解决。

在你的 each() 块中，link.href 将 return 一个未定义的值，所以当你到达你的 then 方法时，你的数组中没有链接到访问。尝试 links.push(links.attr('href') 而不是 links.push(link.href) 来获取 href 属性的值。

在您的 then 方法中，您的 while 循环不是遍历数组的最有效方式（并且它很可能会因未定义的值而出错）。你应该改用 .forEach()，像这样：

links.forEach((link)=>{
  cy.visit(link)
)

如果你不需要持久化 links 数组，那么你的整个命令可以大大简化：

Cypress.Commands.add("ex", () => {
  cy.get("*[class='link post']")
    .then((links) => {
      links.each((link)=>{
        cy.visit(link.attr('href'))
      })
    })
});

Answer 2

要添加到 Kerry 的回答中，

给.then()回调的参数是一个jQuery对象，包含一个或多个由cy.get(...)

找到的元素

要遍历元素，您需要使用展开运算符解构 jQuery 对象，

Cypress.Commands.add("visitLinks", () => {
  cy.get("*[class='link post']")
    .then($links => {                          // $links is a jQuery wrapper

      [...$links].forEach(link => {            // link is a raw element
        const url = link.getAttribute('href')  // apply DOM method
        cy.visit(url)
      })

    })
});

或者如果您想使用 Cypress 迭代器 .each() 而不是 .then(),

Cypress.Commands.add("visitLinks", () => {
  cy.get("*[class='link post']")
    .each($link => {                      // jQuery wrapped element

      const href = $link.attr('href')     // apply jQuery method
      cy.visit(href)         

    })
});

不过

要断了

cy.visit() 导航页面，这会更改页面中的 DOM，因此在 .each() 的第 2 次迭代中，赛普拉斯发现事情发生了变化并崩溃（可能是“分离的”元素”错误）。

您应该将查询（获取链接）与操作（访问它们）分开。

Cypress.Commands.add("getLinks", () => {
  
  const found = [];

  cy.get("*[class='link post']")
    .each($link => {                      // jQuery wrapped element

      const href = $link.attr('href')     // apply jQuery method
      found.push(href)      

    })
    .then(() => found)                    // wait until iteration finishes
                                          // then return the array of links    
});

这样使用

cy.getLinks()
  .then(links => {
    links.forEach(link => cy.visit(link))
  })

赛普拉斯没有执行 "then" 部分

cypress not executing "then" portion

testing

automated-tests

cypress

e2e-testing