web-dev-qa-db-ja.com

サイプレスでの画像の読み込みのテスト

画像がページに読み込まれることをサイプレスでテストしたいと思います。

私のソースコードは次のようになります。

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
});

そのコードはどのようになりますか？

javascriptreactjscypress
4
stein korsveien

あなたが探しているのはアサーションであり、この場合、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');
});
7
sesamechicken

静的リソースの読み込みのレシピを更新しました。 https://github.com/cypress-io/cypress-example-recipes/pull/36 を参照してください。

画像の読み込みが完了したかどうかを確認する最も簡単な方法は、画像の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)
})

または、パフォーマンスエントリを使用して、静的リソースの読み込みが完了したことを確認できます。詳細については、上記のプルリクエストを参照してください。

5
gleb bahmutov