HTML and Selenium. An introduction

HTML elements

An HTML element has the following syntax:

 <element [attribute="value"|...] />

An HTML element in enclosed within a preceding ‘<‘ and a trailing ‘/>’ characters. An HTML element can have none, one or many attributes, depending on its’ type. The attribute has pairs of keys and values to define additional information about the element.

There are a few attributes that can be assigned to any HTML element. Two of them are described here:

  • ID – to specify a unique identifier for the element.
  • CLASS – an element can have one or more classes.

There are a great number of HTML elements, but for the purpose of Selenium testing, the most commonly used ones are presented below.

Common HTML elements


Link

Element: a. Attributes:

    • href: the URL that will open when the link will be clicked. The value of this attribute is a string. Example:
       <a href="https://iamalittletester.wordpress.com" />
  • target: where the link will open. This attribute can only have a subset of predefined values: _blank (the link opens in a new window or tab), _self (default – opens in the same frame), _parent (opens the link in the parent frame), _top (opens in the same window).  A frame represents an area of the whole page, delimited by the <frame> element. Example:
     <a href="https://iamalittletester.wordpress.com" target="_top" />


Dropdown

Element: select. Syntax:

<select>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="valuen">Value N</option>
</select>

This will create a dropdown that contains the following values, in this order: Value 1, Value 2, Value N. Each element, as can be seen here, has a corresponding ‘option’ tag, to create an entry in the dropdown.


Image

Element: img. Attributes:

  • src: the source URL from where the image is to be loaded.
  • height: specifies to what height should the image be resized. If not specified, the height will remain the default one (the height of the actual image, as it appears at the ‘source’ location).
  • width: specifies to what width should the image be resized. If not specified, the width will remain the default one (the width of the actual image, as it appears at the ‘source’ location).

Example:

 <img src="theSourceUrl" height="500" widht="320" />


Lists

There are three different types of lists:

    • numbered lists are made up of an opening <ol> and a closing </ol> tags, within which each list element is represented by a <li> and </li> pair of tags. Example:
<ol> 
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
</ol>
        • unordered lists are made up of <li> and </li> tag pairs, as many as the elements of the list. Example:
 <li>One</li>
 <li>Two</li>
 <li>Three</li>

            • bulleted lists are made up of an opening <ul> and a closing </ul> tag, within which each list element is represented by <li> and </li> pairs of tags. Example:
<ul> 
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
</ul>

Grouping elements

To group elements in the HTML page for structuring purposes, <div>, <span> and <table> elements.


Input

An input element can be of several types. It is included in <form> elements and is used for allowing users to input data, data which is then submitted and processed. An example of a form can be a page where a user is asked to provide his personal details in order to create an account on a site, to purchase something online, and so on. Some of the available inputs are described below. For each of them the syntax is the same (but some of them have different attributes that they can declare):

 <input type="theType" [attribute="value"|...] />

Text area: By using the type=”text” attribute, you will define an area in which you can type text.

Submit button: By using type=”submit”, you will declare a button that will submit the form, once you click it. Once submitted, the data the user has entered on the form is submitted to be processed.

Checkbox: By using type=”checkbox” you will create a checkbox that is by default not selected. It can be selected/unselected by clicking on it.

Email field: By using type=”email”, you will create an input element into which you need to enter text, that is validated against a valid email format. If the text typed into this input does not match the expected email format, a gentle reminder is displayed next to the field.

File upload: By using type=”file”, you will define an element that has a ‘Browse’ button, allowing you to upload a file from your local computer.

Password: By using type=”password”, you will create an input field into which you can enter text. While you type, the letters will not actually be seen inside the field, but instead ‘*’ characters will be displayed, to mask the characters that were typed into the field.

Radio button: By using type=”radio”, radio buttons can be created.

There are different attributes that can be used with an input, depending on which type of element you want to create, but there  are also some common ones. For example:

  • checked=”checked”: if an element is selected (checked) by default (for radio buttons and checkboxes).
  • disabled=”disabled”: if an element should be disabled and should not be interacted with. For example, in the case of a checkbox, if it is disabled, it cannot be selected or unselected.
  • value: this attribute defines string values, and specifies the text to be displayed by default within the input. For example, for an email, you can display a predefined value inside the email field.

Interaction with HTML elements from Selenium

The Selenium library allows interaction with the HTML elements, by means of the following methods implemented within its’ classes:

  • click() – click on an element. The elements you can click on are: buttons, radio buttons, checkboxes. You can also click inside of input fields that allow for typing text (like email, password, regular text input fields). The usage is element.click().
  • sendKeys() – typing something into a field. The actual usage is: element.sendKeys(“The text to be typed”). You can type into fields that allow for this type of action (like email, password, regular text input fields). You cannot type inside buttons of any sort (radio/checkbox/regular ones).
  • getAttribute() – retrieve the specified attribute for any element. The usage is : element.getAttribute(attribute). For example, by applying this method to an element that has a ‘class’ attribute, this method will return the value of the attribute (by calling getAttribute(“class”)).

To be able to use these methods, you will first need to give Selenium the reference to the HTML elements you want to interact with. To understand how to create the elements for Selenium tests, you can read this post: https://iamalittletester.wordpress.com/2014/02/25/creating-the-page-objects/. But before that, as prerequisite for that post, you should first read about XPATH and CSS selectors.

Advertisements

2 thoughts on “HTML and Selenium. An introduction”

  1. Hi

    Iam a regular reader of your blogs but iam not getting the right article where i should ask my query.
    Can you please guide me in the below query ?

    Objective : Iam planing to automate the e-Commerce webportal http://www.fashionandyou.com/
    Iam trying to initially open the webportal, click on User login icon and then close the brower with portal. Iam planning to further create a POM framework for whole webportal.

    Error/ Issue : Iam getting Null Pointer Exception. Page is opening up but not clicking on any sign in icon on RHS or click on any link on top menu. And, Page also, remains open, not getting closed

    Stack Trace :->
    FAILED CONFIGURATION: @AfterMethod AF
    java.lang.NullPointerException

    FAILED: TM
    java.lang.NullPointerException
    at base.Common.TM(Common.java:81)

    Code :->
    package base;

    import java.io.File;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.concurrent.TimeUnit;
    import org.openqa.selenium.By;
    import org.openqa.selenium.WebDriver;
    import org.openqa.selenium.firefox.FirefoxDriver;
    import org.openqa.selenium.firefox.FirefoxOptions;
    import org.openqa.selenium.firefox.FirefoxProfile;
    import org.openqa.selenium.firefox.internal.ProfilesIni;
    import org.openqa.selenium.remote.DesiredCapabilities;
    import org.testng.annotations.AfterMethod;
    import org.testng.annotations.BeforeMethod;
    import org.testng.annotations.Test;

    public class Common {

    public FirefoxDriver driver;

    @BeforeMethod
    public void BM(){

    System.setProperty(“webdriver.gecko.driver”, “D://Rajiv//Selenium//geckodriver.exe”);
    FirefoxProfile ffprofile = new FirefoxProfile();
    ffprofile.setPreference(“dom.webnotifications.enabled”, false);
    WebDriver driver = new FirefoxDriver(ffprofile);
    driver.get(“http://www.fashionandyou.com/”);
    driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);

    }

    @Test
    public void TM(){

    driver.findElement(By.xpath(“//span[@class=’ng-binding’]”)).click();
    System.out.println(“Women Link got clicked”);
    driver.findElement(By.xpath(“//i[contains(@class,’glyphicon c-icon iuser ng-scope’)]”));
    System.out.println(“Login icon got clicked”);

    }

    @AfterMethod
    public void AF(){
    //driver.quit();
    driver.close();
    }
    }

    Please, guide me what mistake iam doing.. I have tried my best but it seems iam not getting what mistake iam doing. Please guide and reply.

    Thanks

    Like

    1. It is a bit difficult for me to see where the actual error is, but the Failed Configuration from the AfterMethod suggests that there is an issue with the browser instance not being started. I am not sure of exactly which line of code throws the error from the test method.
      I would have some suggestions for you regarding the code itself:
      – method names should always start in lower case and should be as descriptive as possible. For example, AF should be afterMethod
      – you could try to run the same code with Chrome. I haven’t used Firefox in tests lately because it became quite unstable and each new release brings bugs in older functionality. Therefore i find Firefox unreliable and even slower than Chrome.
      As i said, i am not sure from the code where it failed, but i suspect the browser did not start properly.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s