説明

VRTs – Visual Regression Tests は、あなたのサイトに不要な視覚的変化がないかテストするプラグインです。このプラグインは、選択したページと投稿に対して毎日自動テストを実行します。ツールは毎日比較スクリーンショットを作成し、参照スナップショットと比較します。スクリーンショットの間に違いがある場合、自動的にメールで通知されます。3つの比較モードを使って、簡単に違いを見つけることができます。

注意:テストの設定と実行には、サイトが一般にアクセス可能である必要があります。パスワードによる保護や何らかのファイアウォールにより、プラグインが正しく動作しない場合があります。

望ましくない変化を見抜く戦略

更新やコード変更の後、通常どのようにウェブサイトをチェックしていますか？手作業で全ページをチェックしたり、すべてが問題なく動作することを祈ったりしていませんか？視覚的回帰テストは、エラーや視覚的な異常を見つけるのに役立つ方法を提供します。VRTs プラグインは、あなたのプロセスを自動化する環境を提供します。

任意のページや投稿の毎日テストを有効:有効化すると、参照用のスクリーンショットが撮影されます。これは投稿が保存または更新されると更新されます。
即時アラートを受け取る:スナップショットと比較スクリーンショットの間に変更が検出された場合、プラグインはアラートを作成し、メールで通知します。アラートが解決されるまで、毎日テストは一時停止されます。
2つのスクリーンショットを比較:差分、分割画面、またはサイドバイサイドビューで2つのスナップショットの違いを検出します。
要素の除外:スナップショットから動的要素、広告、アニメーションを除外することで、誤検出を防ぎます。
テストを解決する:問題を修正したら、そのアラートを解決済みとしてマークしてください。新しいスナップショットが生成され、テストが再び実行されます。

使用例

視覚的回帰テストは、どのような場合に問題を発見するのに役立つのでしょうか?

プラグインとコアソフトウェアのアップデート
手動によるコード変更
外部ソフトウェアと API の問題
サーバーの問題
マルウェアとその他の悪意のあるコード
品質保証の欠落

機能

すぐに最初のテスト:プラグインの有効化後、ホームページはすぐに監視され、アラートは保存された管理者のメールに送信されます。
毎日テスト:このプラグインは、選択した投稿とページを毎日自動的にスキャンします。2つのスクリーンショットを比較することで、ビジュアルコンテンツを検証します。
3つの比較モード:スナップショットを比較する3つの方法 – 差分、分割、サイドバイサイドビューから選択します。
即時アラート:スナップショットと比較スクリーンショットの間で変更が検出されるとすぐに、メールで通知されます。
GDPR 対応:スナップショットはヨーロッパのサーバーに保存されます。個人情報は一切収集しません。
クロスチーム:管理者権限を持つチームメンバーは、テストを作成・閲覧し、即座に解決策を一緒に考えることができます。

永久無料

テストは3ページまで
1つのドメインで
毎日自動テスト

GO PRO

VRT がお好きで、より多くのテストを実行したいですか？
有料プランでより多くの機能をご利用ください：

合計500ページまでテスト可能
マルチドメイン
毎日自動テスト付き
そして無制限の手動テスト
run tests programmatically with do_action( ‘vrts_run_tests’ )
複数のアラート受信者を追加する
メールサポートを受ける
新機能へのアクセス

すべての料金プランを見る

バグレポート

バグを見つけましたか?サポートフォーラムで問題を作成して報告してください。

続きを読む

VRT についてもっと知りたいですか?

公式製品ページ:

VRT – 視覚的回帰テスト

リソース:

視覚的回帰テストはどのように機能するのか？

スクリーンショット

WordPress のページや投稿のサイドバーにある「テストを実行」をクリックしてテストを開始します。
実行中および一時停止中のすべてのテストの概要を表示します。
アラートの概要を把握。1つずつ確認して解決しましょう。
差分ビューは、参照スナップショットと新しく作成されたスクリーンショットをマージします。両者の違いは赤くハイライトされます。
スプリットビューでは、垂直スライダーで2つのスナップショットを比較できます。
サイド・バイ・サイド表示では、2つのスナップショットが隣り合って表示されます。
無制限の手動テストを実行。

インストール

WordPress に vrts をインストールする

(推奨)

プラグイン> 新規追加を開く
Visual Regression Testsを検索する
プラグインをインストールと有効化をクリックする

FTP を使って手動で VRTS をインストールする

WordPress のプラグインページからプラグインをダウンロードする。
‘visual-regression-tests’ フォルダを /wp-content/plugins/ ディレクトリにアップロードする。
WordPress の「プラグイン」メニューから VRTs プラグインを有効化する。

有効後

デフォルトではホームページは即座に監視され、アラートは保存されている管理者のメールに送信されます。
設定を開き、アラートを受信するユーザーを設定します。
より多くのテストを有効にするには、固定ページまたは投稿を開きます。

Vrts Pro へのアップグレード

VRT > アップグレードを開く
PRO版を購入する場合はクリック
プラグイン購入後に受け取ったライセンスキーを入力してください。

FAQ

視覚的回帰テストとは何か

ビジュアル回帰テストでは、サイトの以前の状態と最近の状態を比較することで、サイトのエラーや不要な変更を検出することができます。例えば、フロントエンドのエラーはプラグインのアップデートや変更によって引き起こされる可能性があります。小規模なサイトの場合、すぐに見つけることができるかもしれませんが、複雑なサイトの場合は難しくなります。ページや投稿の写真を撮って視覚的な変化を検知し、自動的に知らせてくれるツールが役立ちます。

視覚的回帰テストはどのように機能するのか?

テストは、手動、ピクセル単位、DOM ベース、AI ベースで行うことができる。いずれの場合も、以前のウェブサイトの状態と新しいウェブサイトの状態を比較します。私たちの Visual Regression Tests プラグインは、定期的にスクリーンショットを取り、分割画面で比較します。

なぜ視覚的回帰テスト用のツールを使う必要があるのか?

ビジュアル・テストは、手動でも自動化ツールでも行うことができます。手作業でウェブサイトのエラーをチェックするのは時間がかかり、精度も低くなります。自動化されたテストでは、最小限の無関係なエラーが見つかるかもしれません。しかし、重大なエラーを発見できる可能性は、ツールを使った方がはるかに高くなります。エラーを発見するとすぐに警告が表示されるので、できるだけ早く問題を修正することができます。

テストは私のサーバーで行うのですか?

スクリーンショットと比較は外部サーバーで実行され、WordPress ウェブサイトに送信されます。必要なメタデータのみがデータベースに保存されます。

メール通知が正しく機能しないのはなぜですか?

外部スクリーンショットサービスが WordPress インストールに直接アクセスできない場合、テストステータスの更新とメールの送信は WP-Cron システムによって処理されます。新しいアラートについてプラグインから通知を受けるには、WordPress インスタンスがメールを送信でき、 WordPress cron システムが正しく設定されていることを確認してください。WordPress の cron システムのデフォルト設定は、サイトを大量にキャッシュしている場合、頻繁に訪問者がない場合、または wp-admin を定期的に使用していない場合、確実に動作しません。この場合、WP-Cron をシステムのタスクスケジューラーにフックするか、外部のクーロンジョブスケジューリングサービスを使用する必要があります。

プラグインはクッキー同意バナーで機能しますか?

はい、クッキーバナーは問題ではありません。スナップショットを撮る前に、ツールは自動的にAccept ボタンをトリガーしてバナーを隠すことができます。このオプションはプラグイン設定の CSS セレクタで設定できます。

Can I test custom post type archives with VRTs?

The VRTs plugin primarily supports WordPress pages and posts. Automated visual testing of pages with dynamically changing content can lead to false positives. However, you can test such pages by following these steps:

Create a new blank page or post in WordPress.
Set up a redirect from this page to your desired URL.
Configure a test for this page. The screenshotter will follow the redirect.

How do I prevent screenshots from getting blocked?

If your firewall is blocking our screenshot service, whitelist our IP address to resolve this: 49.13.14.240.

For Cloudflare, follow these steps:

Log in to your Cloudflare account.
Navigate to Security WAF.
Click on Tools.
In the IP Access Rules box, enter 49.13.14.240.
Select Allow from the action dropdown.
Add “VRTs” as the note.
Click Add.

評価

Ren 2024年2月22日

Being able to monitor all my sites for those strange visual changes that sometimes happen after a theme or plugin update is priceless. I’ve worked a bit with support to streamline/exclude some elements of my pages that move, like a video header or carousel or animated button, and I now have this very trustworthy tool to alert me if a site gets wonky. Beyond that, the team working on this plugin is kind and super responsive and open to feedback, which is definitely a big plus. I do have Pro, but the Free works equally as well if you don’t need to trigger manual tests (which I find useful to do after doing updates I know will cause an alert so I don’t have to wait for it the next day). Other VRT solutions I found want a bunch of money per site and that just isn’t realistic for us freelance web folks. This plugin is GREAT!!!

baermktg 2023年4月23日

I absolutely love this tool and highly recommend it to any freelancers updating multiple sites on a regular basis. It provides a level of comfort because it will catch changes and errors automatically rather than waiting to hear from a client or scrolling way too many pages to assure no errors after updates.

asafm7 2023年3月15日 1 reply

Simple, essential and works brilliantly. Thanks for a great tool!

clusterchris 2022年12月15日

DISCLAIMER: Yes I work for the company, but I have worked for many companies and I never recommended a product which I was not convinced of. And because I still have 30+ years until retirement, the time for me to move on will come and I don’t want to undermine my credibility and come in a situation where they tell me in my new company “So, you recommended this tool, it was horrible!”And I also work in support, so the last thing I want is to have for example our clients install a tool that brings me headache. Considering all this, I can only recommend this tool. It makes monitoring a website so much easier and I already don’t want to work without it anymore.But don’t believe my words, test it yourself and you will see what I mean.

dr.mykola 2022年12月6日

It’s very convenient to track visual bugs or editor’s errors and prevent them from getting to the production site. Disclaimer: I work at the company that built this plugin and we use it for our clients websites, it does its job well.

pmachart 2022年12月5日 2 replies

tja. right now we can’t do anything with the plugin : the “add new” test button is disabled. i have tested and verified this on several wordpress installs with various sets of install plugins – including a fresh clean install. the only published version of this plugin right now is 1.0.0 which leads me to think that the four previous reviews are probably fake. one of them even has the author company name in its nickname (mykolableech) another one has only one other plugin review, and that is on another bleech plugin (skil3e) the other two reviews are by very recent accounts : both created just before posting the review. come on guys, this plugin has very promising features and huge potential. the product page on your website is very exciting. i have been waiting for the release for a long time… i even had a pagescreen monitor on your website to make sure i didn’t miss it ! (such irony) you can do better than this ! i’ll edit this review if anything changes.

9件のレビューをすべて表示

貢献者と開発者

VRTs – 視覚的回帰テストはオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

Bleech

“VRTs – 視覚的回帰テスト” は1ロケールに翻訳されています。翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“VRTs – 視覚的回帰テスト” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログを RSS で購読してみてください。

変更履歴

1.9.1

Fixed alerts pagination SQL query compatibility with MySQL 5.7 and lower.

1.9.0

Test now run continuously and do not pause upon alerts.
Added onboarding for tests and alerts.
Fixed character encoding in alert emails.
Improved test status display inside the Gutenberg editor and classic metaboxes.
Removed pagination for tests.
Minor wording and styling changes.

1.8.0

Added option to mark alerts as false positive.
Improved tests order by status.
Minor wording and styling changes.

1.7.1

Fixed issue with uninstalling the plugin.

1.7.0

Fixed issue with formatted entities for page title inside email notifications.
Added bulk action “Add to VRTs” for all public post types.
Improved test status display flow.

1.6.0

Fixed WordPress 6.4 deprecated notices for list tables.
Added hook allowing developers to run tests by calling do_action( 'vrts_run_tests' ).
Added test page title and url to email notifications.

1.5.2

内部オプション名を変更。

1.5.1

ポストアップデート時にレストデータが空になる問題を修正

1.5.0

テストステータスの表示を修正
警告リストテーブルの URL 表示を修正
特定のプランでテストを手動でトリガーする機能を追加

1.4.0

翻訳用のテキストドメインを修正。
スクリーンショット中にページ上の要素をCSSセレクタで非表示にする機能を追加。クイック編集または投稿の編集ページでテストごとに編集可能。
警告の修正や投稿内容の変更後に、古いベーススクリーンショットが削除されるように改善されました。

1.3.1

ピクセルの差が> 1の場合のみアラートを作成する機能を改善。
更新ページに現在のプランを表示

1.3.0

初期検証ロジックの変更
保護されたウェブサイトで機能するようにした
テスト結果を取得する cron ジョブを追加
未公開記事のテスト追加を許可
コード構造の改善
外部サービスとのコミュニケーション改善
ブロックエディタの互換性と rest api の機能を改善

1.2.4

WordPress 6.2 へのアップグレード後に Gutenberg エディタがクラッシュする問題を修正しました。
Gutenberg エディタ内のメタボックスの動作を改善

1.2.3

テストと警告検索を修正

1.2.2

WPML プラグインを使用しているサイトの URL 検証を修正しました。

1.2.1

プラグイン更新時の URL バリデーションを修正

1.2

ライセンスの検証および通知を修正
警告のピクセル数を修正
警告ビューのメタボックスのピクセル数を修正
管理用 ajax のステータスコードを修正
サイトが移動した場合の通知メッセージを追加
サービスが利用できない場合、メタボックス内に通知を追加
ライセンス追加/削除時のライセンス処理の改善
プラグインアンインストール時のデータ削除の改善
メタボックス内の通知ロジックの改善
UI/UX の微調整と改善

1.1

特定のケースにおける新しいテスト追加モーダルの問題を修正しました。
通知メールのサイト URL を修正
admin-ajax フォールバック機能の追加
外部サービス接続時のエラーメッセージを追加
プラグインの無効化と有効化の改善
テスト削除の改善
一般的な UI/UX の調整と改善

1.0

初回リリース

説明