Magento Testing with Ghost Inspector

magento ghost inspector


  • Quick in training. You do not have to postpone studying Selenium as usual 🙂
  • Integration with popular services. For example, you can add a notification of the test results in a Slack and set the automatic start of testing
  • Compatible with Selenium. You can export or import Selenium tests
  • You can just cover page of the Magento website with screenshot, and make the comparison in the next test to be sure that someone didn’t break something 🙂

You can use the so-called “chrome recorder” for Magento testing if you are not technical person

For advanced tests you just need:

  • Basic knowledge of HTML and CSS
  • Basic knowledge of javascript

Let’s show what you can do in the demo version of Magento 2.

Case study:

Developers have made new features, you want to cover the “priority / critical” tests and run the tests after each deploy on production.

Small Glossary:

Test Suite is a set of tests, that contains the parent settings for tests

Tests – the checkings, that are included in the Test Suite, and can override the settings of the Test Suite.


1. Check that the product card on category page has HTML elements that you need

Let’s use “chrome recorder”

Go to the category page on Magento website and click “start recording”


Start recording


Then click Make Assertion:


Make Assertion


Then choose HTML elements that you want to check in tests.
You will see the cross that is hovered over an element and you select the desired item


Wanted HTML elements


Wanted HTML elements 2


After that, click “I’m Finished Recording”


Finished Recording


Then save it to the Test Suite:


Save test


After you go to the link of the test, you will see the following page:


Category page


Here there is a handy constructor that consists of steps that can be edited.

For example, let’s edit the step, where we check the item with the price.

Chrome recorder set the type assertions “element text contains” but we just need to check whether the element exists


Chrome recorder


Save the test and run it again:


run test


The test is completed:


Test is completed


If for some reason, after the deploy will disappear, for example, color swatches:


color swatches


The test results will look like this:


test results


2. Comparison of screenshots.

The simplest Magento testing with Ghost Inspector is to save the screenshots. For example, this is convenient when the Magento development team has made a static page and it should not break, (change styles, indentation between elements, disappear text and id)

For example, let’s add test with screenshot for About US page

Let’s create a test in the admin panel:


test in the admin panel


Select “Screenshot Analysis” = “Yes, compare screenshots for display differences”


Screenshot Analysis


And we will choose toleranceLet’s choose – 10%

Then we run the test. Great, the screenshot is saved:


screenshot is saved


Now let’s break the page 🙂 Delete the text.

Run the test and get the error:


get the error


And Ghost Inspector will show what’s broken


Ghost Inspector show broken

In this simple way, we got ourselves stuck with mistakes.

On Magento sites where it can be more than 100 such pages, it can save you a lot of time for testing, especially if you often deploy on production


Happy Magento QA testing with Ghost Inspector. 🙂

Was this article helpful?
Dislike 0
Views: 159
Valentyn Kubrak

Valentyn KubrakChief Operating Officer

Rate us
Please wait...