Cypress 如何检查背景图像是否已加载？

在使用 Cypress 进行端到端测试时，检查背景图像是否已正确加载是一个常见的需求。有多种方法可以实现这一功能，下面我会详细介绍其中一种比较通用的方法。

方法：使用 CSS 属性和 JavaScript 验证

步骤 1：定位元素并获取 CSS 属性

首先，我们需要定位到有背景图像的 HTML 元素，并获取它的 CSS 属性。在 Cypress 中，我们可以使用 cy.get() 来选取元素，然后用 .should('have.css', 'property-name') 来检查特定的 CSS 属性。

javascript
cy.get('selector') // 替换 'selector' 为目标元素的选择器
  .should('have.css', 'background-image')
  .and('match', /url\(.*?\)/); // 此正则表达式检查 CSS 属性值是否包含 URL

步骤 2：提取 URL 并验证图像加载

通过上一步获取的 URL，我们可以使用 JavaScript 的 Image 对象来验证图像是否成功加载。这可以通过创建一个新的 Image 对象，将其 src 属性设置为我们从 CSS 属性中提取的 URL，并监听 load 和 error 事件来实现。

javascript
cy.get('selector') // 使用相同的选择器
  .invoke('css', 'background-image')
  .then((url) => {
    // 正则表达式来提取 URL
    const imageUrl = url.replace(/.*\s?url\(["']?/, '').replace(/["']?\).*/, '');

    return new Cypress.Promise((resolve, reject) => {
      const img = new Image();
      img.onload = () => resolve(true);
      img.onerror = () => reject(new Error('Image did not load'));
      img.src = imageUrl;
    });
  })
  .should('not.be.rejected');

例子

假设我们有一个元素，比如一个 div，它的类名是 .profile-background，并且它有一个背景图像。我们想要验证这个背景图是否已经加载。代码将如下所示：

javascript
cy.get('.profile-background')
  .should('have.css', 'background-image')
  .and('match', /url\(.*?\)/)
  .invoke('css', 'background-image')
  .then((url) => {
    const imageUrl = url.replace(/.*\s?url\(["']?/, '').replace(/["']?\).*/, '');

    return new Cypress.Promise((resolve, reject) => {
      const img = new Image();
      img.onload = () => resolve(true);
      img.onerror = () => reject(new Error('Image did not load'));
      img.src = imageUrl;
    });
  })
  .should('not.be.rejected');

这段代码首先确认有 background-image 属性，并且属性中包含了 URL。接着，它提取 URL 并使用 Image 对象来检查图像是否能够加载。如果加载成功，Promise 将会解决，测试将会通过。如果无法加载图像，Promise 将会被拒绝，Cypress 测试将会失败。

这样的方法提供了一种强大而灵活的方式来验证背景图像的加载状态，确保用户界面按照预期显示。