How to set up Selenium automated tests for Magento projects

Flawless operation is a must when talking about a Magento ecommerce store. Precise and proper testing is needed to achieve this. Selenium can be of enormous help in this respect: you can test your online store’s performance in a simple, time and cost effective way resulting in improved service and user experience.



After reading this article you will find out:

  • Why to choose Selenium?
  • When is it especially worth using it?
  • How is Selenium structured and what is it made up of?
  • How to download it?
  • What are its functions? How to use it?
  • At the end of the article I will show you the process through a simple example.

Come on, join me!

magento selenium tester bea  

 

An ecommerce entrepreneur must follow the changes of the market in today’s competitive retail industry and he or she has to make regular modifications to the website. These smaller changes make it possible for the online store owner to react on the latest trends and keep up with competitors. These modifications may be new products, offers, discounts, shipping methods, payment methods and many other things. The companies must ensure “flawless” user experience even during the regular modifications, otherwise these may lead to negative and undesirable results. For this purpose the testers must continuously check the website and remove the errors. Web developer companies work according to an agile methodology where the “sprints” are quite short and it is necessary to run comprehensive regression tests after each modification. Unfortunately, when changes are made too often, manual testing may become monotone and may take a lot of time. Sooner or later you will have to apply some sort of “facilitation”. This is where Selenium comes into the picture. Let’s see why.

 

1) Why Selenium?

 

SELENIUM:

Selenium is a Firefox extension that makes Black Box type user interface testing possible, which means that you test the application as a whole without knowing its internal operation. You can record test cases with the Selenium IDE Firefox plugin that automatically records the operations done in the browser.

 

This may very much facilitate the life of testers because the tests are developed quickly, but still in an optimal way, and this can be quite cost effective. In addition, Selenium IDE is a remarkably helpful tool since it makes the steps after which the application becomes testable effectively, quickly and in a robotic way, thus putting the software in a condition that would be boring and tiring to reach or test manually. If you automate the path, and following it to reach this point, you will no longer be exhausted and stressed out and you will still be able to provide the best of your testing knowledge.

 

Introduction of automated tests has countless advantages. Let us check out some:

  • It is possible to repeatedly replay the test cases
  • You may perform test cases simultaneously
  • You can run tests without supervision
  • It increases accuracy and greatly reduces errors generated by people
  • You can save time and money

  This is where some important questions arise:

  • What is the best tool to automate my test cases?
  • What costs are implied?
  • How easy is it to apply?

  In case of web applications, as I’ve already mentioned, Selenium is a very good solution to all issues mentioned above. Why?

  • It is easy to use
  • It is free (open source)
  • It has a great user database and an assisting community
  • It supports several programming languages

 

2) When is it especially worth using Selenium?

Selenium IDE is an easy-to-use tool for simple test cases but in case of the more complex ones (where, for example, there are several branches/forks), it is less easy to apply. It is really worth making Selenium tests when there are no major further modifications to the interface, but development of the backend logic, services or background systems is ongoing. When doing Selenium user interface testing, the tests can be replayed any time, so you can continuously be informed about the results of your tests!

 

3) How is Selenium structured and what is it made up of?

Selenium is not just a separate tool that can only be used by itself, but it is rather a package made up of different testing tools. This package consists of the following components:

  • Selenium Integrated Development Environment (IDE) Selenium ide icon
  • Selenium Remote Control (RC) Selenium RC icon
  • Selenium WebDriver
  • Selenium Grid  Selenium Grid icon

  The users may choose from these tools according to their specific needs.

Selenium Package  

 

Selenium IDE

Selenium IDE is the simplest tool of the Selenium Package. Its Record and Replay functions make learning it exceptionally easy, as it requires none or just a very little programming competence.  

Selenium RC (Selenium Remote Control)

Selenium RC (Selenium 1) is a tool written in Java that allows creation of test scripts to web applications in the desired programming language and it also ensures their running. This tool is not really used by itself any more.  

Selenium Grid

Selenium Grid makes a new function available, namely that the tests written in Selenium RC can be run in several browsers and on several platforms simultaneously.  

WebDriver

WebDriver is a separate tool, but it has a lot of advantages especially when it is combined with Selenium RC. The fusion of the two is often called Selenium 2. WebDriver directly reaches the browsers that support automation.  

Supported browsers:

Selenium - Supported browsers  

Supported programming languages:

Selenium - supported programming language  

Supported operating systems:

Selenium - supported operating systems  

 

4) How to download Selenium?

Step 1: Open the browser (Firefox) and enter the seleniumhq.org URL. This is the official site of Selenium. Click on the “Download” tab where you will find all existing versions of Selenium.

 

Selenium download  

 

Step 2: Under the Selenium IDE entry you will find a link that will take you to the extensions page of Firefox, from where you can immediately download and install Selenium IDE.

 

Selenium IDE download install

 

 Step 3: Click on the “Add to Firefox” button.

 

Selenium IDE Firefox  

 

Step 4: Click on the “Install” button.

 

Selenium installation  

 

Now the icon of Selenium IDE appears in the upper right-hand corner of your browser. Later you can start the programme from here. If you click on it, the Selenium window will immediately pop up.

 

Selenium install  

 

5) Functions and use of Selenium

Let us look at its menus and functions in detail!

 

1) Menu bar

The menu bar is placed in the upper part of the Selenium window and it consists of five parts:

  • File
  • Edit
  • Actions
  • Options
  • Help

  1.1. File menu The File menu is very similar to that of any other application. It allows the user to:

  • Create new test cases, open existing ones or save the actual one.
  • Export a given test case or a test suite in the desired programming language with the ”Export Test Case As” and the “Export Test Suite As” options. The first one exports the currently active test cases while the second one exports all that are open.
  • Close the test case.

  Selenium menu file  

Selenium IDE test cases can be saved in the following format:

  • HTML format

Selenium IDE test cases can be exported in the following formats/programming languages:

  • java (exported in Java)
  • rb (exported in Ruby)
  • py (exported in Python)
  • cs (exported in C#)

  1.2. Edit menu

Selenium edit menu 

 

The Edit menu allows options like Undo, Redo, Cut, Copy, Paste, Delete and Select all, which are usually present in all Edit menus. In addition to these, the following ones are available:

  • Insert New Command – this allows the user to insert a new command within the test case
  • Insert New Comment – this allows the user to insert a comment within the test case that explains subsequent commands

  Insert New Command The new command goes above the selected command/step.

 

Selenium new command  

 

The user can now insert the new command by filling in the Target and the Value fields.

 

Selenium new command target value

 

Insert New Comment The new comment is inserted the same way as the new command is.

 

Selenium new comment 

 

The colour purple indicates that this is a comment/explanation.

 

1.3 Actions Menu

 

Selenium actions menu  

 

You can choose from the following options under Actions menu:  

  • Record – When you click on this button, Selenium IDE starts recording the steps made in the Firefox browser.
  • Play entire test suite – This option runs all test cases belonging to the current test suite.
  • Play current test case – This option runs the currently active selected test case.
  • Pause/Resume – Running of test cases can be paused and resumed.
  • Toggle Breakpoint – The user can insert one or even several breakpoints in the test, thus forcing the test to stop at any step.
  • Set/Clear Start Point – Here you can add a starting point to any step, which the test will start from thereafter.
  • It is also here where you can set the running speed of the test with the “Faster, “Fastest”, “Slower” and “Slowest” buttons.

 

1.4 Options menu

 

Selenium options menu 

 

The Options menu allows the user the practise the handling of settings supported by Selenium IDE. The user can “play” with the general settings (General), with the available formats (Formats), the available extensions (Plugins) and with the available locators and their order (Locator Builders).

 

Selenium options menu general

 

1.5 Help menu If you are stuck, this is where you can check out the documentation, this is where you can report eventual detected errors and this is from where you can go to the official website or blog page of Selenium.

 

2) The URL bar

The URL bar looks the same and operates roughly the same way as that in a browser. It stores the addresses of previously visited sites, so later you will only have to select one, which makes your life much easier, especially if you cannot remember and keep in mind all the addresses of the websites you work on.

 

Selenium url bar  

 

3) Toolbar

 

Selenium toolbar

 

You can find the toolbar directly under the URL bar and it includes the following options:  

  • Playback Speed – This is where the running speed of the test can be set. Selenium toolbar playback speed
  • Play test suite – With this button you can run all test cases that are currently open. Selenium toolbar play test suite
  • Play test case – You can run the currently active test case with this button. Selenium toolbar play test case
  • Pause – You can pause the running of the test. Selenium toolbar pause
  • Step – The user can step over a given command implementing one command at a time. This is generally used at error correction. Selenium toolbar step
  • Rollup – You can unite two or more steps. Selenium toolbar rollup
  • Record – You can start and stop the recording with this button. Selenium toolbar record

 

4) Editor

The editor is the window where the steps of the test case are visible. This is where the newly recorded commands appear, too. The editor has two views:

 

1) Table view

 

Selenium table  

 

2) Source view The test case appears in HTML format here.

 

Selenium source view 

 

The user has the opportunity to enter the commands in the Editor, Selenium offers the possible options right after entering the first character. You can select the given item directly from the browser if you click on the Select button. The Find button points to the item associated to it based on the given value.

 

Selenium find  

 

5) Test Case window

 

Selenium test case window

 

This is where the latest test case will appear, but since it is possible in Selenium to open several test cases at the same time, all of them will be listed here. This way you can easily choose which one you would like to work on for the moment. When clicking on a test, its steps appear in the Editor window. Test results also appear here, which Selenium indicates in two colours: red and green.

  • Colour Red indicates errors and the failure of the test
  • Colour Green can be associated with a successful test case

 

6) Log window

 

Selenium log window 

 

On the Log tab you can see information, in the form of messages on each step separately, at the moment when they are run. It also appears here, indicated in colour red, if there are errors in the test or if it failed. This way you can easily make corrections to your test later on. You can also find the Reference tab here where you get detailed description of a given command, and also the Expert tab that is added to Selenium by an extension. Hints and correction tips appear here that can be immediately performed by clicking on the Inspect and then the Fix buttons. With this, we have more or less arrived at the end of the introduction and the theoretical part. I would like to finish my article with a short example so that you can see all that has been mentioned above in practice, too. This is really a simple test case, much more complex ones could be made up, but I did not want to overcomplicate things since that is not the point of my article.

 

6) ‒ Example

  Making a test “script” consists of 3 major steps:

  1. Record – Selenium IDE records all clicks and operations done in the browser.
  2. Replay – The already made up test case has to be replayed several times in order to make sure it works well, whether it needs eventual correction or fine-tuning.
  3. Save – In case the test is reliably stable, it is recommended to save it, so that it can be used again any time in the future.

 

Record

Step 1 Launch Firefox browser and also Selenium at the same time by clicking on the icon in the toolbar.   Step 2 Enter the address of the website to be tested (accounts.google.com) in the URL bar.

 

Selenium URL testing

 

Step 3 The Record button is enabled by default, in case it is not, do not forget to enable it, otherwise it will not record the steps.   Step 4 Open the given website (accounts.google.com) in Firefox.

 

Selenium google sign-in example  

Step 5 Enter an existing and real e-mail address.   Step 6 Enter the password that belongs to the e-mail address.   Step 7 Click on the “Sign In” button to complete signing in.   Step 8 At the end, you can stop the recording with the red button and can replay your test case.   WARNING. In case you have not recorded the Sign out step in the test case, you need to make this step by all means before replay, otherwise Selenium will not find the necessary fields or buttons.

 

Replay

Now that your test is done, you need to replay it in order to see whether it is stable enough. Click on the “Play current test case” button.

 

Selenium replay    

 

Save

In case everything is fine, you can save the script by clicking on the File -> Save as option.

 

SUMMARY

 It is an obvious objective to improve the quality of your website and to offer a positive user experience. Still, the people working to reach this aim, must love and enjoy their work in the meantime in order to give their best. All in all, Selenium is a very useful tool with which you can facilitate your testers’ job and provide better quality. As explained above, it is relatively easy to use, but requires a lot of practice, since there is a great number of possibilities and options if more complex tasks are to be performed.

 

 


magento_request
Do you need our support?
  • Magento Site Check
  • Magento Code Audit
  • Magento SEO Audit
  • Magento Project Rescue
Request help

NEED A RELIABLE, PROFESSIONAL MAGENTO DEVELOPMENT PARTNER?

Contact us if you have any question or requirement related to the preparation of a new or renewal of an existing online store.

Next