代码之家  ›  专栏  ›  技术社区  ›  Laura

断言元素在Cypress中不可操作

  •  8
  • Laura  · 技术社区  · 8 年前

    如果某个元素在页面上不可操作(在本例中,被另一个元素覆盖),并且您试图单击它,Cypress将显示如下错误:

    CypressError: Timed out retrying: cy.click() failed because this element:
    
    <span>...</span>
    
    is being covered by another element:
    

    太好了!但是有没有任何方法可以断言这是事实,也就是说不能单击元素?

    这不起作用:

    • should.not.exist -元素确实存在
    • should.be.disabled -元素未被禁用
    • should.not.be.visible
    • 使用 cy.on('uncaught:exception', ...) ,因为这不是例外
    1 回复  |  直到 8 年前
        1
  •  14
  •   Richard Matsen    8 年前

    参见柏树测试 click_spec.coffee

    it "throws when a non-descendent element is covering subject", (done) ->
    
      $btn = $("<button>button covered</button>")
        .attr("id", "button-covered-in-span")
        .prependTo(cy.$$("body"))
    
      span = $("<span>span on button</span>")
        .css(position: "absolute", 
             left: $btn.offset().left, 
             top: $btn.offset().top, 
             padding: 5, display: "inline-block", 
             backgroundColor: "yellow")
        .prependTo(cy.$$("body"))
    
      cy.on "fail", (err) =>
        ...
        expect(err.message).to.include "cy.click() failed because this element"
        expect(err.message).to.include "is being covered by another element"
        ...
        done()
    
      cy.get("#button-covered-in-span").click()
    

    cy.on('fail') 用于调试。

    这类似于使用 expect().to.throw()

    为了更彻底,我会打电话给 click({force: true}) .

    it('should fail the click() because element is covered', (done) => {
    
      // Check that click succeeds when forced
      cy.get('button').click({ force: true })
    
      // Use once() binding for just this fail
      cy.once('fail', (err) => {
    
        // Capturing the fail event swallows it and lets the test succeed
    
        // Now look for the expected messages
        expect(err.message).to.include('cy.click() failed because this element');
        expect(err.message).to.include('is being covered by another element');
    
        done();
      });
    
      cy.get("#button-covered-in-span").click().then(x => {
        // Only here if click succeeds (so test fails)
        done(new Error('Expected button NOT to be clickable, but click() succeeded'));
      })
    
    })
    

    /柏树/支架/索引.js

    Cypress.Commands.add("isNotActionable", function(selector, done) {
      cy.get(selector).click({ force: true })
      cy.once('fail', (err) => {
        expect(err.message).to.include('cy.click() failed because this element');
        expect(err.message).to.include('is being covered by another element');
        done();
      });
      cy.get("#button-covered-in-span").click().then(x => {
        done(new Error('Expected element NOT to be clickable, but click() succeeded'));
      })
    }) 
    

    /赛普拉斯/集成/我的测试规范js

    it('should fail the click() because element is covered', (done) => {
      cy.isNotActionable('button', done)
    });
    

    注意

    我在等着呢 done() 当测试前提(即按钮被覆盖)为假时超时。

    .then() 关闭第二次点击允许 完成() 以错误消息调用。这个 then() 只有在单击成功时才会调用回调,否则 cy.once('fail')