クラス名が頻繁に変更されるページのテスト
Maxymiserテストを作成し、ページ上のオブジェクトを変更する場合、Maxymiserはセレクタを使用してHTMLオブジェクトを検索し、セレクタはページのクラス名を使用することがしばしばあります。そのため、クラス名がリリース間で変更されると、Maxymiserテストの作成方法に影響します。
バリアントの作成
次に、サイトのリリース間でクラス名が変更された場合にページ上のオブジェクトを変更する方法の例を示します。ページ上のオブジェクトを視覚的に変更してから、コード・エディタでセレクタを手動で編集します。
ノート: すべての例で、一重引用符と二重引用符の使用に注意してください。
イメージを変更するには:
- イメージを視覚的に選択して、新しいイメージに置き換えます。
- コード・エディタを開いて、次のコードを変更します。
- クラス・セレクタに基づいてイメージを変更するかわりに、ページ上のイメージを識別する特定のテキストが
src属性に含まれるイメージを変更します。 - ブラウザの検証機能を使用して、イメージの名前を検索します。
- 次の名前を含むイメージを検索するようにAPIコールを更新します: img-category3-873x270.jpg
spa.dom.changeImageBanner(".category-info > .image > .img-responsive", {imageUrl: "#$(ContentManager:DiscountBanner-1138-Copy.jpg)!"});
spa.dom.changeImageBanner("img[src*='img-category3-873x270.jpg']", {imageUrl: "#$(ContentManager:DiscountBanner-1138-Copy.jpg)!"});
イメージを削除するには:
- イメージを視覚的に選択して削除します。
- バリアントのコード・エディタを開いて、次のコードを変更します。
- クラス・セレクタに基づいてイメージを削除するかわりに、ページ上のイメージを識別する特定のテキストが
src属性に含まれるイメージを削除します。 - ブラウザの検証機能を使用して、イメージの名前を検索します。
- APIコールを更新して、次の名前のイメージを削除します: img-category3-873x270.jpg
spa.dom.remove(".category-info > .image > .img-responsive");
spa.dom.remove("img[src*='img-category3-873x270.jpg']");
ページ上のテキストを変更するには:
- テキストを視覚的に選択し、テキストを編集します。
- バリアントのコード・エディタを開いて、次のコードを変更します。
- APIコールを更新し、Kidsというテキストを含む
h1ノードのコンテンツをChildrenに置き換えます。
spa.dom.editHtml("#content > h1", "Children");
spa.dom.editHtml("h1:contains('Kids')", "Children");
リリース間で変更されないクラス名の使用
サイトのリリース間で変更されない名前、IDまたはその他の属性がサイトに存在する可能性があり、これらを使用できます。変更されない名前がないかどうかを開発者に確認します。
トリガーの作成
セレクタは、hasまたはcontains関数と組み合せることができます。詳細は、SPAのリファレンス・ドキュメントを参照してください。
特定の子孫を持つ要素を検索できます。たとえば、次のセレクタは、内部に特定のイメージを持つすべてのdivコンテナに対応しています。
"div:has(img[src*='img-category3-873x270.jpg'])"
プログレッシブWebアプリケーションのテスト
プログレッシブWebアプリケーション(PWA)では、PWAサイトをリリースするたびに一部のクラス名が変更される可能性があります。PWAサイトのリリース間でクラス名が変更されるかどうかは、開発者に確認する必要があります。