Do not use Selenium for visual web testing

Sometimes, the project may require tests to be created for visual test cases.

For example, the following test case does a lot of visual verifications for 2 fields of a login page, username label and username textbox:

• open home page

• check that home page url is correct

• go to login page

• check that login page url is correct

• check that username label is displayed

• check that the username label width is correct

• check that the username label height is correct

• check that the username label font size and font family are correct

• check that the username textbox is displayed and enabled

• check that the username textbox width is correct

• check that the username textbox height is correct

• check that the username textbox is a textbox (input tag, type = text)

• check that the username label is aligned with the username textbox on the X axis

• check that the username label is displayed above the username textbox

The test is very straightforward:

@Test
public void userNameFieldsAreDisplayedCorrectlyTest() {

   driver.get(HOME_PAGE_URL);//1
   Assert.assertEquals(driver.getCurrentUrl(), HOME_PAGE_URL);//2

   WebElement loginButton = driver.findElement(LOGIN_BUTTON_LOCATOR);//3
   loginButton.click();

   Assert.assertTrue(driver.getCurrentUrl().startsWith(LOGIN_PAGE_URL));//4


   //user name label validations
   WebElement userNameLabel = driver.findElement(USERNAME_LABEL_LOCATOR);
   Assert.assertTrue(userNameLabel.isDisplayed());//5

   Rectangle userNameLabelUiInfo = userNameLabel.getRect();

   Assert.assertEquals(userNameLabelUiInfo.getWidth(), 207);//6
   Assert.assertEquals(userNameLabelUiInfo.getHeight(), 21);//7

   Assert.assertEquals(userNameLabel.getCssValue("font-size"), "14px");//8
   Assert.assertTrue(userNameLabel.getCssValue("font-family")
                                  .contains("Arial"));


   //user name textbox validations
   WebElement userNameTextBox = driver.findElement(USERNAME_TEXTBOX_LOCATOR);

   Assert.assertTrue(userNameTextBox.isDisplayed());//9
   Assert.assertTrue(userNameTextBox.isEnabled());

   Rectangle userNameTextBoxUiInfo = userNameTextBox.getRect();

   Assert.assertEquals(userNameTextBoxUiInfo.getWidth(), 200);//10
   Assert.assertEquals(userNameTextBoxUiInfo.getHeight(), 30);//11

   Assert.assertEquals(userNameTextBox.getTagName(), "input");//12
   Assert.assertEquals(userNameTextBox.getAttribute("type"), "text");


   //alignment validations
   Assert.assertEquals(userNameLabelUiInfo.getX(),   
                       userNameTextBoxUiInfo.getX());//13

   Assert.assertTrue(userNameLabelUiInfo.getY() < 
                          userNameTextBoxUiInfo.getY());//14

}

The test case makes validations on

• the username label

• the username textbox

• the alignment of these fields.

It is pretty simple and …. it should not be created at all.

At least, not this way.

---

What is wrong with it?

The test case is incomplete.

There are many other CSS verifications that can be done on the username label in addition to checking the font family and the font size.

The test case may also be impacted by the browser size and by the browser zooming factor.

But the most important issue is the amount of code that is needed for such simple UI validations. And we only worked with 2 elements. Imagine that we want to add also the password label, the password textbox and the login button. The number of lines of code in the test will increase a lot very soon.

The more code we write, the more mistakes that we can make, the more troubleshooting of the code, the more maintenance.

We should avoid these as much as we can.

---

So should we not automate any UI test cases?

By the contrary, we should do this.

But not by writing our own Selenium code.

Instead, we should use an existing library such as Applitools.

The difference between automation code implemented with Applitools and automation code that you write is similar to the difference between a TESLA and a regular bike.

---

Use Applitools for all your UI automated web tests.

Use Selenium for all your functional automated web tests.