web-dev-qa-db-ja.com

サイプレスを使用して、ロゴ画像がページに存在することを確認する簡単なテストをどのように記述しますか

具体的には、ロゴがアプリのホームページに表示されることをテストしたいと思います。画像の検索に何を使用すればよいかわからないようです。

私は試した

it('has a logo', function () {
    cy.visit('http://localhost:3000')
    cy.get('img').should('contains' , 'My-Logo.png')
  })

cy.getの代わりに、私も使用しようとしました

cy.contains('My-Logo.png')

しかし、それも失敗します。

どの要素を使用する必要があるか、またはgetを使用する必要があるかどうかはわかりませんでしたが、失敗します。 Webページのソースコードを見ると、ロゴがjavascript（nodeJS、vueJS、およびexpressJSアプリケーション）内に隠されています。アセットフォルダー内の画像名に画像ページがない場合でも、画像ページ。 My-Logo.d63b7f9.png。

node.jsexpressvue.jscypress
10
general

私は自分で解決策を見つけました。

_cy.get('form').find('img').should('have.attr', 'src').should('include','My-Logo')
_

要素を調べたところ、_<img src..._行が_<form>_に埋め込まれていることがわかりました。 cy.get('form')を実行して渡すことはできましたが、cy.get('img')を渡して渡すことはできませんでした。それで私はそれらを一緒に連鎖させ、それは通過しました。なぜ2番目のshouldステートメントを単に追加できないのかはわかりませんが、実行しようとしただけでは失敗しました。

_cy.get('form').find('img').should('include','My-Logo')
_

理由は完全にはわかりませんが、最初の「すべき」ステートメントが必要でした。 VUE拡張子なしのファイル名を尋ねることで数字と文字のシーケンスを追加しました。ドキュメントがこれをカバーしていないようで、これが他の誰かの助けになることを願っています。

12
general