VRTs – 視覚的回帰テスト

説明

Find issues before others do – every time. With automatic screenshots, daily comparisons, and instant tests after WordPress and plugin updates. Select the pages of your choice for continuous monitoring. The plugin immediately notifies you of any visual changes it detects.

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

Your strategy to spot unwanted changes

How do you check your website after updates and code changes? Do you manually go through pages, or do you just cross your fingers, hoping everything will be okay? Visual regression testing provides a better way to spot issues and detect visual changes. The VRTs plugin automates testing for you with a click of a button.

  1. Activate tests for any page or post: Upon activation, a reference screenshot is taken. This will be renewed when a post is saved or updated.
  2. VRTs monitors your pages: Every day, VRTs captures and compares screenshots of your selected pages. Upgrade to Pro to automate tests for WordPress updates, integrate deployment pipelines via API, and run manual tests on demand.
  3. Receive instant alerts: If a change is detected between the snapshot and the comparison screenshot, the plugin will notify you via email.
  4. Review changes: The difference view makes it easy to spot changes, while the comparison slider lets you inspect the details.
  5. Hide elements: Prevent false positives by excluding dynamic elements, ads, and animations from snapshots.

Use cases

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

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

Features

  • No Setup: After plugin activation, the frontpage is immediately monitored and alerts are sent to the WordPress admin email.
  • Daily Tests: The plugin monitors selected posts and pages and compares screenshots daily.
  • Hide Elements: Hide dynamic or irrelevant elements to prevent false positives in your tests.
  • Click Element: Define an element that should be clicked before taking a screenshot. This is useful for closing cookie banners or modals.
  • Email Notifications: As soon as a change is detected between the snapshot and the comparison screenshot, you will be notified via email.
  • Fullscreen Review: Inspect changes up close using the difference view and comparison slider in fullscreen mode.
  • Read / Unread: Keep track of test results that require further attention by marking alerts as unread.
  • Flag False Positives: Identify acceptable changes or non-issues to minimize unnecessary notifications.
  • Update Automation (Pro): Automatically trigger tests on WordPress core, plugin, theme, or language updates and catch any issues right away.
  • Manual Testing (Pro): Run tests manually on demand, either for all configured pages or for specific pages, to verify any changes or global edits immediately.
  • API Integration (Pro): Trigger tests via PHP scripts or WP CLI for integration with other tools, deployment pipelines, or custom automations.
  • Customizable Notifications (Pro): Specify email addresses for each trigger, to set up notifications for various teams or stakeholders.

Free forever

  • Test up to 3 pages
  • On one domain
  • Automatic daily tests

Go Pro

Do you like VRTs and want to run more tests?
Unlock more features with our paid plans:

  • Test up to 500 pages in total
  • On multiple domains
  • Scheduled daily tests
  • Multiple alert recipient groups by alert type
  • Manual tests (unlimited)
  • API access (unlimited) Read the docs.
  • Automatic tests after WordPress updates, plugin updates and plugin installations

See pricing plans

Bug reports

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

Read more

Want to learn more about VRTs?
Visit our website: vrts.app

スクリーンショット

  • Review changes using the difference view and comparison slider.
  • Get an overview of all past test runs, their triggers and detected changes.
  • Manage all your registered test pages.
  • Activate tests right within the editor.
  • Specify multiple alert recipients for each trigger (Pro Feature).
  • Run unlimited manual tests at any time (Pro Feature).

インストール

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

(推奨)

  1. プラグイン> 新規追加を開く
  2. Search for vrts
  3. プラグインをインストールと有効化をクリックする

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

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

有効後

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

Vrts Pro へのアップグレード

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

FAQ

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

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

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

Tests can be done manually, pixel-by-pixel, DOM-based or AI-based. In all cases, you compare an earlier website state with a newer one. Our Visual Regression Tests Plugin takes periodical screenshots and compares them on a split screen.

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

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

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

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

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

If our external screenshot service cannot access your WordPress installation directly, test status updates and sending emails will be handled by the WP-Cron system. In order to be notified by the plugin about new alerts, please make sure that your WordPress instance can send emails and that the WordPress cron system is set up correctly. The default configuration of the WordPress cron system does not work reliably if you cache your site heavily, do not have frequent visitors or do not use wp-admin regularly. In this case, you should hook the WP-Cron into the system task scheduler, or use an external cron job scheduling service.

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

はい、クッキーバナーは問題ではありません。スナップショットを撮る前に、ツールは自動的に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:

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

評価

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!!!
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.
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. 
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.
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 – 視覚的回帰テスト はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

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

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

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

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

変更履歴

2.0.2

  • Fixed empty and stalled Runs
  • Fixed runs queue pagination
  • Fixed wrong test status and the associated current alert
  • Fixed wrong translations info for update trigger

2.0.1

  • Fixed issue with wrong alerts count in Runs
  • Fixed few minor styling issues
  • Removed deprecated notice

2.0.0

  • Introduced Runs
  • New test review experience
  • Automatic tests for WordPress and plugin updates
  • Customizable notification recipients for each trigger

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

  • 初回リリース