赛普拉斯 - 仅当元素可点击时才点击它

Question

Cypress 中有模拟网页分页功能的方法吗？

一个示例场景是网页的分页器功能。因此，此功能或方法将使我能够单击 'next page' 或 'previous page' 图标，直到我无法继续前进。

我请求信息的代码示例如下：

while (cy.get(<locator string>).isClickable()) {
     cy.get(<locator string>).click();
     //and some other instructions to follow;
}

希望我能正确描绘它！ ;)

Answer 1

我不确定这是否有帮助，如果有其他方法可以让我知道

    cy.get('ul[id=myPager] > li').children('a[class^=page_link]').then(function(pages)
    {
        cy.log(pages.length)
        
        //clicking next until no succeeding pages available to click
        for(var x = 1; x < pages.length; x++)
        {
            cy.get('li').children('a[class=next_link]').click()
            if(x === 2)
            {
                cy.log('No succeeding pages to be clicked')
            }
            else
            {
                cy.log('Clicking')
            }
        }
    })

要使前面的页面自动化，只需反转循环即可：

for(var x=pages.length; x >= 1; x--)
//instructions to follow

Answer 2

您可以使用 jquery enabled selector 检查按钮是否启用，并根据它执行其他操作。

cy.get('button').then(($btn) => {
    if ($btn.is(":enabled")) {
        cy.wrap($btn).click() //Button is enabled
    } else {
        //Button is disabled
    }
})

Answer 3

while循环部分可以用递归函数处理，

function clickUntilDisabled(selector, callback, pageNo = 0) {

  if (pageNo === 100) {
    throw 'Too many clicks'                          // avoid runaway recursive calls
  }

  cy.get(selector).then($clickable => {
    if ($clickable.prop('disabled')) return;         // exit

    $clickable.click()
    callback(pageNo)                                 // other stuff to do
    clickUntilDisabled(selector, callback, ++pageNo) // repeat
  })
}

clickUntilDisabled('my-button', (pageNo) => {
  cy.get('row').should(...);                         // testing page here
})

概念验证

示例应用程序

<div>
  <button onclick="nextpage()">Next Page</button>
  <p>Page no: _</p>

  <script>
    let count = -1
    function nextpage() {

      count++
      console.log('Click handler nextpage', count)

      setTimeout(() => {                           // some async change
        const p = document.querySelector('p')      // to make sure the loop 
        p.innerText = `Page no: ${count}`          // waits for fetch
      }, 2000)

      if (count < 3) return  

      // disable after 3rd click
      const button = document.querySelector('button')
      button.disabled = true
    }
  </script>
</div>

测试

function clickUntilDisabled(selector, callback, pageNo = 0) {
  if (pageNo === 100) {
    throw 'Too many clicks'                      
  }
  cy.get(selector).then($clickable => {
    if ($clickable.prop('disabled')) return;       
    $clickable.click()
    callback(pageNo)                                
    clickUntilDisabled(selector, callback, ++pageNo) 
  })
}

clickUntilDisabled('button', (pageNo) => {
  console.log('Callback pageNo', pageNo)
  cy.get('button')
    .then($button => {
      const assertion = pageNo < 3 ? 'not.be.disabled' : 'be.disabled';
      cy.wrap($button).should(assertion)                                  // passes
    })
  cy.contains('p', `Page no: ${pageNo}`)                                  // passes
})

日志

Click handler nextpage 0
Callback pageNo 0
Click handler nextpage 1
Callback pageNo 1
Click handler nextpage 2
Callback pageNo 2
Click handler nextpage 3
Callback pageNo 3

赛普拉斯 - 仅当元素可点击时才点击它

Cypress - Click on an element only if it is clickable

click

paginator

cypress

概念验证