June 12, 2015

The-Internet: Simple Manipulation of a Login Page

Beginning coders in Selenium WebDriver need simple websites to test against. For that purpose, Dave Haeffner ( @TourDeDave ), author of ElementalSelenium.com and the SeleniumGuidebook.com, wrote the-internet.

... No, not "The Internet". The-Internet: https://the-internet.herokuapp.com/. It assembles a collection of Web Elements such as dropdowns, checkboxes, and a login page that automated testers can test against.

For today's blog post, I will speed automated testers through some basic Selenium / Java sample code I quickly hacked together: how a tester can interact with the various page elements of a login screen. The code tests what needs to be tested, it successfully runs... but it ain't pretty.

After the basics are covered, with the next blog post I will get to the topic that I actually wanted to talk about: Refactoring the code to fit  some of the style they use at Fitbit-Boston's automation department -- storing locator variables in Enums, storing methods interacting with the DOM in Page Object Classes, and inserting Utility classes that add logging functionality.

Setting Up the Development Environment

If you are curious to know the setup I have been using at Fitbit-Boston for the past three months to write automated tests, and what I use on my home system:

  • Platform and Operating System: Macbook Pro at work. Home: Windows 7.
  • Integrated Development Environment (IDE): IntelliJ. Although we use the Enterprise Edition at work, the only difference between that and the free Community version is extra features for database integration.  
  • Test Framework: We use TestNG at work. At home I can experiment writing tests in JUnit on my home system, bring the code to work, swap the importing of JUnit to the importing of TestNG and it works fine. 
  • Dependencies Management: Even though at work we use Gradle, and at home I use Maven, I really haven't seen many differences. I don't interact with either of them on a daily basis. 
  • Browsers: Both at work and at home to inspect page elements, I use the Firefox browser plugins Firebug and Firepath to examine the web document. Even though Fitbit tests its site in Chrome, Firefox and IE8, for this rudimentary example of Selenium code, I will be just sticking with Firefox since that is the standard Selenium WebDriver browser included with WebDriver.

If you need help getting IntelliJ, setting up Maven, setting up your pom.xml file or JUnit, or installing Firefox, Firebug or Firepath, there is a free introduction on Alan Richardson's page, Start Using Selenium WebDriver at http://seleniumsimplified.com/get-started/.

If you are looking for more material, Alan Richardson has an extensive course on Selenium 2 WebDriver with Java at http://courses.compendiumdev.co.uk/courses/selenium-2-webdriver-with-java which helped me immensely preparing for my current position.

Make sure to go to the official SeleniumHQ site at http://docs.seleniumhq.org/docs/ or visit their new documentation that is still in progress at https://seleniumhq.github.io/docs/.

Examining the Login Page

If you go to The-Internet's login page at http://the-internet.herokuapp.com/login, the following screen is shown:

The title of the page is called "The Internet".

Note that according to the description of the Login page:

  • username = "tomsmith"
  • password = "SuperSecretPassword!"
When you enter the username and password into the correct textboxes, and select the Login button, you are taken to the next page.

The next page, http://the-internet.herokuapp.com/secure, is also called "The Internet". If you click on the Logout button on that page, you are successfully logged out. 

Inspecting the Web Elements

If you have the Firefox plugins Firebug and Firepath installed, if you select the username textbox, right click on it, and select "Inspect in Firepath", you will see the properties of the web element you selected. You can let Selenium WebDriver know what web element you are choosing by these selectors.

Username textbox:

<input id="username" type="text" name="username"/>

... For a selector, WebDriver can select for this web element by the id called "username". 

Password textbox:

<input id="password" type="text" name="password"/>

... For a selector, WebDriver can select for this web element by the id called "password". 

Login button:

Finding a selector for this web element is trickier. If you right click on the Login button and "Inspect in Firepath" you see:

<button class="radius" type="submit">

... With this element, you cannot select by id, since an id is not given. You can select by CSS Selector, which I mention in an earlier blog post.  

If you select the FirePath tab, and select the CSS dropdown, entering the following code into the CSS textbox in FirePath and selecting "Enter" should have the Login button outlined:


You have just validated that using the above CSS Selector will select the Login button. 

Writing the Test in Selenium / Java

Now that we examined the pages, mapping out the workflow, and figured out how to select the web elements by id and by css selector, we can begin writing the test. 

To make the test more readable, I separated the driver instantiation in the setUp() method, the actual test in test_Login(), and closing and quitting the browser in a tearDown()method. For those three methods, I used JUnit to tag what I wanted to run @Before the test, what was the actual @Test and what I was going to be running @After the test. 

For even more readability, I added logging functionality by capturing information in System.out.println("...") statements.

Just in case there were any synchronization errors, if any page elements were slow to load, a few wait statements were added.

Console Output

The following text is outputted to the console, suitable for a Jenkins log file:

"C:\Program Files\Java\jdk1.8.0_40\bin\java"
Navigating to: http://the-internet.herokuapp.com/login
Waiting for page to load...
The title of the page is: The Internet
Entering username...
Entering password...
Selecting the submit button.
Waiting for page to load...
The title of the page is: The Internet
The current url is: http://the-internet.herokuapp.com/secure
Waiting for logout button to load...
Selecting the logout button.

Problems with this Approach:

There are many problems with this iterative approach:

  • You have the tests themselves, the Selenium code that interacts with the DOM, and the logging functionality all jumbled up together.
  • The code handling the Login Page and the code handling the Secure page are also jumbled together.
  • All of this code is just to select web elements and navigate through just two pages. What happens if the selectors for the page elements change? You would have to scan the entire codebase, make changes, and hope that you covered all the instances of that web element. 
  • What if the test changes? How can you add or subtract from the tests if you don't know where exactly they are?

Next Steps

With my next post, I will discuss refactoring this into something a bit more professional looking, more in line with what we use at Fitbit.

Please note: I have been an automated tester only since March 2015. This is only my best guess on how to translate what we use at work. I am writing this blog to deepen my own understanding of automated testing. If there are any glaring errors about Java, OO, WebDriver, or anything else please let me know in the Comments section!
NEXT: Drafting Common Utilities

-T.J. Maher
 Sr. QA Engineer, Fitbit
 Boston, MA

// Automated tester for [ 3 ] month and counting!

Please note: 'Adventures in Automation' is a personal blog about automated testing. It is not an official blog of Fitbit.com


Anonymous said...

I feel very grateful that I read this. It is very helpful and very informative and I really learned a lot from it. SKYWESTONLINE

markson said...

After this. Will climb to a registry at a time into a URL until and except if you discover anything. too many redirects error message

Internet Offers Now said...

internet offers now is the best website for those people who are searching for the best high speed internet deals. Get the exclusive offers and discounts on high speed internet connection to enjoy your favorite videos, songs and movies without buffering instantly

mathi said...

Thanks for sharing beautiful content. I got information from your blog.keep sharing

Abogado Divorcio Manassas VA

yash said...

great post on Automation , keep posting valuable information Salesforce Course In Pune


Useful post Thanks for sharing , Amazing write-up always finds something interesting. python training in pune


informative blog , keep doing AWS training in pune

Henry Wick said...

If you need any legal hrlp, visit our page. Abogado DUI Mecklenburg Virginia

john stephen said...

Abogado Conducción Imprudente Nueva Jersey
The author provides a comprehensive guide on manipulating login pages in 'The-Internet', offering clear and practical instructions for those new to the subject. The step-by-step guide provides valuable insights into online security intricacies, making it a commendable resource for those seeking to understand login page manipulation and its potential implications.

TesTo said...

Nearly a decade ago many of them worked for automation. Within a couple of years most of the work will be automated. Big credits to these kind of tech people. Keep sharing more good informative blogs. Abogado Defensor Criminal Federal de la Ciudad de Nueva York

jones said...

helpful article I appreciate you sharing. Fantastic article that always finds something intriguingprince william county criminal attorney

Lime Emerson said...

Informative blog! I appreciate your hard work for making this blog. Keep share more. Fairfax VA DUI Defense Lawyer

Kamila Hornakova said...

I have been seeing my name everywhere and I mean literally everywhere!

Kajal Dixit said...

After reading the blog my doubts got Cleared . the Blog is very informative!! Zoom Broadband Speed test

Cara said...

"The-Internet: Simple Manipulation of a Login Page" is a concise and informative guide that demonstrates essential web security concepts. The tutorial effectively walks users through the process of inspecting and manipulating HTML elements to bypass basic login forms. Its step-by-step approach, combined with clear explanations and screenshots, makes it accessible for beginners. The practical examples help in understanding potential vulnerabilities in web applications. Overall, it’s a valuable resource for those looking to grasp the fundamentals of web security and ethical hacking. abogado de lesiones personales playa de virginia

justin said...

In Fairfax, Virginia, driving without a license is a major infraction that carries substantial legal repercussions as well as safety hazards. Even though there are strict laws in place to guarantee road safety, some people decide to drive without the required paperwork. But this choice puts their own and other drivers' safety on the road at danger in addition to breaking the law.driving without a license in fairfax va