MageDirect

Magento Testing with Ghost Inspector

magento 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”

 

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: 77
Valentyn Kubrak

Valentyn KubrakChief Operating Officer

Rate us
1 Star2 Stars3 Stars4 Stars5 Stars
(12 votes, average: 4.92 out of 5)
rating-magedirectLoading...
Bottom Top