在 Cypress 中测试加载图像

Question

我想测试 Cypress 是否将图像加载到页面中。

我的源代码如下所示：

import React from "react";

export default class Product extends React.Component {
  render() {
    return (
      <div className="item">
        <div className="image">
          <img src="../images/Banana-Snowboard.png" alt="Snow Board" />
        </div>
        <div className="middel aligned content">
          <div className="description">
            <a>Snow Board</a>
            <p>Cool Snow Board</p>
          </div>
          <div className="extra">
            <span>Submitted by:</span>
            <img
              className="ui avatar image"
              src="./images/avatar.png"
              alt="Avatar"
            />
          </div>
        </div>
      </div>
    );
  }
}

而我的测试是这样的：

it("should display a image in element div with class image", () => {
  cy.get('div[class="image"]').find("img"); // some code that test that image is loaded so that it is displaye on the web page
});

it("shoul diplay a image in element div with class image inside class extra", () => {
  cy.get('div[class="extra"]').find('img[class="ui avatar image"]');
  //some code that check that image is loaded so that it is display the web page
});

这段代码会是什么样子？

Answer 1

我已经更新了静态资源加载方法，请参阅https://github.com/cypress-io/cypress-example-recipes/pull/363

要检查图像是否已完成加载，最简单的方法是检查图像的naturalWidth 或naturalHeight 属性。

// we can wait for the <img> element to appear
// but the image has not been loaded yet.
cy.get('[alt="delayed image"]')
.should('be.visible')
.and(($img) => {
  // "naturalWidth" and "naturalHeight" are set when the image loads
  expect($img[0].naturalWidth).to.be.greaterThan(0)
})

或者，您可以使用性能条目来确认任何静态资源已完成加载，有关详细信息，请参阅上面的拉取请求。

Answer 2

您正在寻找的是断言，在这种情况下，should('be.visible') 似乎符合要求。 https://docs.cypress.io/api/commands/should.html

it("should display a image in element div with class image", () => {
  cy.get('div[class="image"]').find("img").should('be.visible');
});

Answer 3

我使用这个 cypress 链来等待应该为用户加载的所有图像，而不是更多（不包括不可见或未初始化的图像）：

获取所有图像（包括 shadow dom - https://docs.cypress.io/api/commands/get#Arguments）

cy.get('img', { includeShadowDom: true })

有一个 src 标签（css 选择器 - https://docs.cypress.io/api/commands/filter）

.filter('[src]')

并且可见（jquery 选择器 - https://docs.cypress.io/guides/references/assertions#Chai-jQuery）

.filter(':visible')

并且全部加载（“naturalWidth”和“naturalHeight”在图像加载时设置）

.should(($imgs) => $imgs.map((i, img) => expect(img.naturalWidth).to.be.greaterThan(0)));

一体化：

cy.get('img', { includeShadowDom: true })
        .filter('[src]')
        .filter(':visible')
        .should(($imgs) => $imgs.map((i, /** @type {HTMLImageElement} */ img) => expect(img.naturalWidth).to.be.greaterThan(0)));

感谢其他人在这里和其他地方的帖子。

Answer 4

我喜欢 jehon 的观点。但就我而言，我们的团队无法遵循拥有可靠的静态图像集的最佳实践，因此我不希望损坏的图像 url 无法通过测试。此版本的代码不会因丢失图像而失败：

cy.get('img', { timeout: 10000, includeShadowDom: true })
  .filter(selector)
  .filter(':visible')
  .each((el) => {
    const url = el[0]?.src || el[0]?.srcset
    if (url)
      cy.request({ url: url, failOnStatusCode: false }).then((resp) => {
        if (resp.status == 200)
          cy.get(el).should((el) => {
            expect(el[0].naturalWidth).to.be.greaterThan(0)
          })
      })
  })