Cypress / JavaScript：带有包含特定单词的 URL 值的断言

Question

我是 Cypress 和 JavaScript 的初学者。我正在尝试改进以下断言，我在下面报告它。

cy.xpath('//div[@data-testid="column"]').should('have.css', 'background-image', 'url("https://assets.website.com/folder/house.jpg")');

在测试中，我正在验证该 div 是否具有具有该

background-image

值的 CSS

url

属性，我尝试以这种方式转换此断言：验证该 div 是否具有具有以下值的 css background-image 属性：包含：“house.jpg”而不是整个 URL。

Answer 1

您也可以使用简单的字符串来完成

include

检查

cy.xpath('//div[@data-testid="column"]')
  .should('have.css', 'background-image')  // changes subject to css value
  .and('include', 'house.jpg')

Answer 2

您需要缩短 url 断言的是部分字符串检查，因为

house.js

是

url("https://assets.website.com/folder/house.jpg")

的一部分。

Cypress 命令将“主题”从一个步骤传递到下一步。因此

cy.xpath('//div[@data-testid="column"]')

将整个元素传递给

.should()

。

您可以使用 jQuery

background-image

方法将主题从元素更改为其

css()

样式值。

cy.xpath('//div[@data-testid="column"]')  // yields the element
  .invoke('css', 'background-image')      // applies .css('background-image') to
                                          // the element and yields the string value
  .should('include', 'house.jpg')         // assert the value has "house.jpg"

参考 .invoke()

Answer 3

您还可以使用带有

.should()

的回调函数进行更复杂的检查。

cy.xpath('//div[@data-testid="column"]')
  .should($el => {
    const backgroundImage = $el.css('background-image')
    expect(backgroundImage).to.include('house.jpg) // retries if expect() fails initially
  })

根据应用方式（样式表或 SCSS），您可能必须使用 getCompulatedStyle 来获取实际的 CSS 值，

cy.xpath('//div[@data-testid="column"]')
  .should($el => {
    const backgroundImage = window.getComputedStyle($el[0])['background-image']
    expect(backgroundImage).to.include('house.jpg)   
  })

Answer 4

您还可以使用简单的正则表达式进行断言，就像 cypress 文档中提到的那样。

cy.xpath('//div[@data-testid="column"]')
  .should('have.css', 'background-image')
  .and('match', /house.jpg/)