在 Cypress 中測試加載圖像

Question

我想測試賽普拉斯是否將圖像加載到頁面中。

我的源代碼如下所示：

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

我使用這條柏樹鏈來等待應該為用戶加載的所有圖像，而不是更多（不包括不可見或未初始化的圖像）：

獲取所有圖像（包括 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)
          })
      })
  })

Answer 5

你可以簡單地做到這一點

    it('Test Broken Images', function() {
    cy.get('img').each(($img) => {
    cy.wrap($img).scrollIntoView().should('be.visible');
    expect($img[0].naturalWidth).to.be.greaterThan(0);
    expect($img[0].naturalHeight).to.be.greaterThan(0);
    });
    })

Answer 6

在我的情況下，對圖像舔翻轉、滾動、上移以及在此動作圖像集之后執行一些隨機操作，因為它是我如何驗證動作正在發生