Magento Testing with Ghost Inspector

Benefits

• 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 https://ghostinspector.com/docs/test-recorder/

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.

Examples

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”

Then click 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

After that, click “I’m Finished Recording”

Then save it to the Test Suite:

After you go to the link of the test, you will see the following 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

Save the test and run it again:

The test is completed:

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

The test results will look like this:

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:

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

And we will choose tolerance. Let’s choose – 10%

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

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

Run the test and get the error:

And Ghost Inspector will show what’s 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. 🙂