使用cypress运行测试时出现错误“ TypeError：无法将属性'width'设置为null ..”，并且测试失败

Question

我正在使用cypress进行测试并出现错误

Cannot set property 'width' of null
TypeError: Cannot set property 'width' of null
at l

尝试使用wait，但得到相同的结果。我是赛普拉斯的新手，并且该网页是由其他人开发的。

describe('Check kaiinPageTransit', function() {

context('Navigation', () => {
    beforeEach(() => {
    cy.visit('https://student-staging.xxx/#/')
    cy.contains('ログイン').click()

            cy.get('.is-mail > input').type(‘abc@miail.com’) 
            cy.get('.is-key > input').type('123qwerty')
            cy.get('.el-button').click()
            cy.get('.bl-mystatus-profile-name').contains('ひっでさん', { timeout: 10000 } )
    })
    it('check kaiinPageTransit', () => {

        //学習状況
        cy.contains('会員').click()
        cy.contains('学習状況').click()
        cy.contains('最近よく学習している科目’)

        //ブックマーク
        cy.contains('会員').click()
        cy.contains('ブックマーク').click()
        cy.contains(‘まだブックマークありません’)

        //視聴履歴
        cy.contains('会員').click()
        cy.contains('視聴履歴').click()
        cy.contains(‘まだ視聴履歴ありません’）

    })

})

}）

Answer 1

在赛普拉斯测试中，有几行添加了错误的引号，例如cy.contains(‘まだ視聴履歴ありません’)，在赛普拉斯中必须使用单引号''。使用以下符号‘时，我已经看到了赛普拉斯的脸部问题。接下来，我假设您正在测试导航选项卡。然后，我可以问您，为什么您需要反复单击此选项卡cy.contains('会員').click()？您仍然位于该页面的右侧，因此无需额外单击即可访问另一个导航选项卡。我已删除了这些点击，并按如下所示重构了测试，它在此处成功运行，请参考以下屏幕截图；单击此ブックマーク导航选项卡后，例如cy.contains('ブックマーク').click()，您在声明/包含步骤结束时错过了一些symbols and space，例如。，对于标签視聴履歴'。我已经在此处更新了这些测试步骤。

describe('Check kaiinPageTransit', function() {
  context('Navigation', () => {
      beforeEach(() => {
      cy.visit('https://student.try-it.jp/#/')
      cy.contains('ログイン').click()

              cy.get('.is-mail > input').type('chanya.deshani@gmail.com') 
              cy.get('.is-key > input').type('12345678')
              cy.get('.el-button').click()
              cy.get('.bl-mystatus-profile-name').contains('さん', { timeout: 10000 } )
      })
      it.only('check kaiinPageTransit', () => {

          //学習状況
         cy.contains('会員').click()
         cy.contains('学習状況').click()
         cy.contains('最近よく学習している科目')


          //ブックマーク        
         cy.contains('ブックマーク').click()
         cy.get('.bl-container>p').invoke('text')       
            .then((text) => {
              const txt = text;
              expect(txt).to.equal('まだブックマークがありません。');

            })

          //視聴履歴
          cy.contains('視聴履歴').click()
          cy.get('.bl-container>p').invoke('text')       
            .then((text) => {
              const txt = text;
              expect(txt).to.equal('まだ視聴履歴がありません。');

            })

      })

  })
  })