Playwright .NET での HTML の比較

写真提供：ミゲル・アPexels のパドリニャン

---

使用している言語とフレームワークに慣れていない場合、テキスト (およびその HTML) のチェックを自動化するのは困難になる可能性があります。学習と探索のための時間が限られているということは、それ自体が課題です。プロジェクトのスモーク テストを自動化するための私のタスクの 1 つは、特定のセットアップごとに独自の歓迎メッセージが含まれる各環境でテキストを検証することでした。そして、正直に言うと、どこから始めればよいのか全く分かりませんでした。何が必要かはわかっていて、それをどこで手に入れられるかもわかりました。しかし、すべての部品を組み立てるのは、見た目ほど簡単ではありませんでした。

私はデータベースにアクセスする必要があることから始めました。次に、セットアップを操作して、実行中にデータベースに接続するためにアプリケーション設定 (フレームワークに情報の検索場所を指示し、構成設定と連携して情報を非公開に保つ) を使用できることを確認します。その後、部分を組み合わせてデータベースから情報を取得し、表示された情報と比較してテストすることができました。

手動では、それは簡単でした。これは、私が期待していたほど簡単ではないことを意味すると推測するべきでした。 HTML を見て、適切なレイアウトになっているかどうかを確認するのは簡単です。シンプルな HTML レイアウトについては十分に理解しているので、これは単語が正しいことを確認するための簡単なチェックであり、次に進みます。私がこのスモークテストを行ったとき、手動検証のために何度も一時停止したのには理由がありました。これと確認する必要のある項目のリストの間に、この自動化を成功させ、他のテストに適用するために学び、探索し、助けを求めることが奨励される予定でした。

データベース アクセス (および適切な接続文字列!) が作成されると、ページのテキストを変数として設定することができました。これは簡単な部分でした。私はここで何をしているのかを理解しており、それをやり遂げることで達成感を感じました。ページ上のテキストは単語単位で一致するが、HTML コンポーネントとは一致しないと予想して、Playwright テストを実行しました。そして私は正しかった - 適切な単語が存在していましたが、HTML が追加されたためテストは失敗しました。

研究の時間です!最初の試みは、ヘッダーを含むページの完全な HTML を取得するコマンドである Page.ContentAsync() を使用することでした。これにより、検索してテキストの部分文字列を見つけることができるようになりますよね?最初のアイデアとしては、それほど恐ろしいことではありませんでした。探していた HTML が保存されていたので、ドキュメントのコンテンツ全体を調べてそれを見つけるだけで済みました。効率的ではありませんし、決して良い習慣ではありません。必要な結果が得られるはずなので、それを繰り返すことができます。

そうではありませんでした。ページ全体から部分文字列を見つけることはすぐには不可能だったので、自動化を高速化したいと考えていました。これを私が望むように機能させるために数十回試みた後、ビジネスのルール (45 分間の努力で解決できない場合は、他の人に頼む) を念頭に置きながら、私は次の人とミーティングを行いました。開発者の一人。彼らが忙しく、非常に必要な最新情報を作成していることはわかっています。会議は「必要に応じてスケジュールを変更できます」というメモが添付されたまま終了しました。

会議を待っている間、私は大騒ぎを続けました。領域を絞り込む際の課題の 1 つは、div のクラスでした。名前が適切ではありませんでした。また、Bootstrap では、div が重複する可能性がありました。同じ名前のせいで他のページで問題が発生しました。私よりもずっと長くここにいた人と話していると、これが常にページの 3 番目の div であることがわかりました。

今度は、それを見つけるための新しい計画を立てました。Nth() ロケーターを使用して、正しい div を見つけます。会議までにこの問題を解決し、現在入力中の記事を書き、次の問題に取り掛かりたいと思っています。ご存知の方や疑問に思っている方も多いと思いますが、これは何か緊急の事態が起きる良い引き金であり、実際にそうなりました。計画は、私たちがペアで開発するときが来るまで、数日間オーガナイザーでページからページへとコピーされました。

この開発者との仕事はいつも楽しいです。私たちは共通点が多く、お互いを尊敬しています。おまけに、彼らは教えるのが上手です！目標が何であったかを簡単に確認した後、これを解決するために私が行った試みを検討しました。役立つことを期待して、IDE のエラーを含む最後のものをそのまま残しました。そして今、進歩を遂げるために！

デバッガを使用して、HTML が正しく取り込まれていることを確認しました。これは私が完全にはチェックしていなかった領域の 1 つでしたが、ありがたいことに正しかったです。私たちは、div 名があまり役に立たないことに同意しました。彼らが最近行った作業では、これと同じ名前で別のページに別の div が作成されていました。その点は指摘されていましたが、テストでその点に到達するまで保留されました。

彼らが持つ NUnit のスキルが必要でした。このセクションを検証する簡単な方法は、AreEqual コマンドを使用することでした。これにより、文字列が等しいかどうかをテストで確認できるようになりました。劇作家は頑固だった。単に作成に時間がかかりすぎる文字列ではなく、あるいはその逆で、ロケーターが必要でした。そして、このテクニックを学べて嬉しかったです。将来役立つと思います!

Nth() を機能させるために何度か試みた後、ページ上でこのクラスが一度だけ使用されていることを確認した後、その奇妙な div クラスを使用することにしました。これで出発点が得られました。次に、そこに HTML を取得する方法を考えます (ありがたいことに、その特定の div にはこれが唯一のものでした)。さらにいくつかの間違ったスタートがあり、私は最終的にその div の ContentAsync() が機能しないという考えを諦め、私が試して破棄した解決策に彼らを導きました。

InnerHtmlAsync() により、div の正確な内容が得られました。スペースもすべて。そして、それが次の障害でした。そして私たちは会議の時間切れになってしまいました。ありがたいことに、彼らはさらに数分時間をくれました。これは主に、これが以前に解決済みの問題だったためです。スペースを削除するための構文が必要なだけです: Replace(" ", "") 興味があれば。これにより、手動検証用に追加した次の PauseAsync() によってテストが一時的に停止されるまで、テストが実行されました。

彼らは昼食に出かけ、私は次の時間をメモの準備に費やしました。他にも見つけるべきものがありましたが、今ではそれをどうやって解決するかという手がかりがさらに増えました。

以上がPlaywright .NET での HTML の比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。