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 是否具有具有 url 值的 css 背景图像属性，我正在尝试将此断言转换为这样：验证 div 的 css 背景图像属性的值包含：“house.jpg” 而不是整个 URL.

如果你能帮助我，非常感谢

Answer 1

您需要缩短 url 断言的是部分字符串检查，因为 house.js 是 url("https://assets.website.com/folder/house.jpg").

的一部分

Cypress 命令将一个“主题”从一个步骤传递到另一个步骤。所以 cy.xpath('//div[@data-testid="column"]') 将整个元素传递给 .should().

您可以使用 jQuery css() 方法将主题从元素更改为其 background-image 样式值。

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 2

您也可以像 cypress docs.

中提到的那样使用简单的正则表达式进行断言

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

Answer 3

你也可以用一个简单的字符串 include check

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

Answer 4

您还可以使用带有 .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），您可能必须使用 getComputedStyle 才能获得实际的 CSS 值，

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

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

Cypress / JavaScript: assertion with an URL value that contains a specific word

css

cucumber

assertion

cypress

cypress-testing-library