Whatever be the web technology, certain web elements won’t lose their relevancy. Almost all of the websites will have a Sign In or Sign Up ‘button’, a Username & Password ‘textbox’, Mouse-hover drop-down menu, a ‘drop-down’ to select your date of birth, multiple images and radio button options. Every user action is via a keyboard or a mouse – be it entering your username text or clicking on a hyperlink. As you might have guessed, there are certain page elements that are available in almost all web pages (or sites) and some common User actions.
Page Elements & User Actions
Now let’s look at the process of automating a website. In simple terms you navigate to the desired page >> identify the element >> perform action >> repeat! Now look at it closely – what if you already know the most common web elements and the corresponding User actions to be performed? Yeah! Every automation tool just provides a way to navigate >> identify >> perform >> repeat. So before moving further on our Selenium series, let’s look at the most common Page elements & User actions to automate.
- Button: What do you do when you first visit a website? Almost certainly you will first click on some button – be it Sign In or a Sign Up. Search, Submit, Login, Add to Cart, etc. – all fall in the category of ‘Buttons’.
- Textbox: The next most common element on any web-page, it’s a graphical control element intended to enable the user to input text information. In simplest terms – username, password & search string fields are all ‘Textboxes’.
- Menu: A tabbed menu, or a drop-down menu after you mouse-hover. The most common action – ‘click’ on a menu item you want to navigate to.
- Drop-down: A drop-down menu is a toggle able menu that allows the user to choose one value from a predefined list. You must have selected your date-of-birth using the date, month & year drop-downs on a website?
- Radio buttons: A graphical control element that allows the user to choose only one of a predefined set of options. Ever selected one out of the ‘Male’ & ‘Female’ radio buttons 😉
- Checkbox: An extension of radio buttons, checkbox allows the user to choose more than one value out of a predefined set of options. E.g. some websites do ask us to select all the relevant categories / interests that apply to you.
- Scroll bar: Almost every website will extend beyond one-page view, i.e. a vertical scroll-bar. Not so common but sometimes a horizontal scroll-bar as well.
- Hyperlinks: Ever clicked on ‘Forgot Password’ link? Or the ‘Next’, ‘Previous’ hyperlinks? As the name suggests, it’s a link from a hypertext document to another location, activated by clicking on a highlighted word or image. Generally it will navigate to another page within the same website.
- Images: What’s a website without images, right? Specially an e-commerce website. Click on the image & view the product details.
- Enter text: Enter your search string on Google or a Username + Password on Facebook.
- Click: Entering the text & click form 90% of the user actions on a website. E.g. Click on Search, Login, Menu, etc.
- Right-click: Some times you might need to right-click, i.e. mouse right button to perform some action like copy & paste.
- Mouse-hover: Ever saw a menu where you just point the mouse and a drop-down options are displayed. Or if you want to view the tool tip text for a certain element (but not click it)?
- Select value: It can be from a drop-down, a radio button or a checkbox. Though a subset of click, but let’s keep it separate for clarity in automation.
- Scroll: To view the full website, we have to scroll vertically and horizontally.
Now that you know the most common page elements and corresponding user actions, it is just a matter of learning how to identify these elements & perform these actions – via your automation tool & preferred programming language. In the subsequent posts, we will look at identifying these elements & performing above user actions using Selenium & Java!
Do you know of any other page element or user action that you have come across while automation? Please feel free to comment.