Cypress / JavaScript：使用包含特定单词的 URL 值进行断言

Question

我正在尝试改进以下断言：

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

在测试中，我验证该 div 是否具有background-image具有该url值的 CSS 属性。

我想将此断言转换为验证 div 是否具有 cssbackground-image属性，其值包含“house.jpg”而不是整个 URL。

Answer 1

您还可以使用回调函数进行.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)   
  })