如何正确进行条件测试

Question

我只想问一下如何正确的进行条件测试？我这里有这段代码

    cy.get('[data-slug="add-to-any"] > .plugin-title > strong').then(($slug) => {
      if (expect($slug).not.to.exist){
         //It will passed
      }else if (expect($slug).to.exist){
        cy.get('#deactivate-add-to-any').should('not.exist')
      }

我将元素声明为 not.to.exist，但它给了我这个错误

Expected to find element: [data-slug="add-to-any"] > .plugin-title > strong, but never found it.

我真的不知道我需要使用什么断言。

Answer 1

理想的方法（如果它适用于您的情况）是将最后一个选择器移动到 .then()

cy.get('[data-slug="add-to-any"] > .plugin-title')
  .then(($pluginTitle) => {

    const $slug = $pluginTitle.find('strong');  // this finds with jQuery 
                                                // which won't fail the test 
                                                // if not found

    if ($slug.length === 0) {  // not found

    } else {
      cy.get('#deactivate-add-to-any').should('not.exist')
    }
  })

它不是 100% fool-proof，如果 $slug 是异步加载的（比如通过 fetch），它不会立即出现并且测试可能会通过，而实际上 $slug 在加载后 100 毫秒出现测试运行。

您需要了解应用程序的工作方式才能真正确定。

Cypress 文档展示了这种模式，使用 <body> 作为“稳定”元素（在页面加载后始终存在）。

cy.get('body').then($body => {
  const slug = $body.find('[data-slug="add-to-any"] > .plugin-title > strong')
  if ($slug.length) {
      ...

不太理想，因为该页面可能 <body> 但仍在其中获取元素。

IMO 的最佳做法是尝试条件元素的 直接父元素 元素。如果这也是有条件的，请向上移动元素树，直到在测试的那个点找到 stable/present 的元素。

或者添加一个等待页面获取完成的保护条件。 cy.intercept() 对此很有用，甚至只是这个

cy.get('[data-slug="add-to-any"] > .plugin-title')
  .should('be.visible')            // retries until .plugin-title is showing
  .then(($pluginTitle) => {
    const $slug = $pluginTitle.find('strong')
    if ($slug.length === 0) {  
      ...

Answer 2

简单示例

cy.get("body").then($body => {
    if ($body.find('[data-slug="add-to-any"] > .plugin-title').length > 0) {   
   
        cy.get('[data-slug="add-to-any"] > .plugin-title').then($title => {
          if ($title.is(':visible')){
            //you get here only if it EXISTS and is VISIBLE
          } 
        });
    } else {
       //you get here if the it DOESN'T EXIST
        cy.get('#deactivate-add-to-any').should('not.exist')
    }
});

如何正确进行条件测试

How to proper Conditional Testing

cypress

cypress-conditional-testing