Cypress - 断言

Cypress 从 Mocha、Chai 等各种库中获取了不止一种类型的断言。断言类型有显式和隐式。

隐式断言

如果断言适用于从链中的父命令获取的对象，则称为隐式断言。流行的隐式断言包括.and/.should。

这些命令不能单独使用。通常，当我们必须验证对特定对象的多次检查时，会使用它们。

让我们用下面给出的例子来说明隐式断言 -

// test suite
describe('Tutorialspoint', function () {
   it('Scenario 1', function (){
      // test step to launch a URL
      cy.visit("https://www.tutorialspoint.com/videotutorials/index.php")
		// assertion to validate count of sub-elements and class attribute value
		cy.get('.toc chapters').find('li').should('have.length',5)
		.and('have.class', 'dropdown')
   });
});

执行结果

输出如下 -

输出日志显示使用 should 和 命令获得的两个断言。

显式断言

如果断言直接适用于对象，则称为显式​​断言。流行的显式断言包括断言/期望。

显式断言的命令如下 -

// test suite
describe('Tutorialspoint', function () {
// it function to identify test
   it('Scenario 1', function (){
      // test step to launch a URL
      cy.visit("https://accounts.google.com")
		// identify element
      cy.get('h1#headingText').find('span').then(function(e){
         const t = e.text()
         // assertion expect
         expect(t).to.contains('Sign')
      })
   })
})

执行结果

输出如下 -

输出日志显示使用expect命令直接应用于对象的断言。

Cypress 具有内部处理的默认断言，不需要专门调用。

几个例子如下 -

• cy.visit () - 期望页面显示带有 200 状态代码的内容。

• cy.request () - 期望远程服务器可用并发送响应。

• cy.contains () - 期望 Web 元素及其属性在 DOM 中可用。

• cy.get () - 期望 Web 元素在 DOM 中可用。

• .find () - 期望 Web 元素在 DOM 中可用。

• .type () - 期望 Web 元素转为可输入状态。

• .click () - 期望 Web 元素转为可点击状态。

• .its () - 期望现有主题的网络元素属性。

Cypress的其他断言

Cypress的其他断言如下：

长度

它检查从先前链接的命令获取的元素的计数。

例如，

cy.get('#txt-fld').should('have.length',5)

价值

它检查 Web 元素是否具有特定值。

例如，

cy.get('#txt-fld').should('have.length',5)

价值

它检查 Web 元素是否具有特定值。

例如，

cy.get(' #txt-fld').should('have.value', 'Cypress')

班级

它检查网络元素是否拥有某个类。

例如，

cy.get('#txt-fld'').should('have.class', 'txt')

包含

它检查网页元素是否拥有特定文本。

例如，

cy.get('#txt-fld'').should('contain', 'Cypress')

可见的

它检查 Web 元素是否可见。

例如，

cy.get('#txt-fld'').should('be.visible')

存在

它检查 Web 元素在文档对象模型 (DOM) 中是否可用。

例如，

cy.get('#txt-fld'').should('not.exist');

CSS

它检查 web 元素是否拥有特定的 css 属性。

例如，

cy.get('#txt-fld'').should('have.css', 'display', 'block');