DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Testing, Deployment, and Maintenance
  3. Testing, Tools, and Frameworks
  4. Website UI Testing

Website UI Testing

Take a look at this method for creating short, quick unit tests that still accomplish their goal, for the purpose of testing your website's UI.

Simon Foster user avatar by
Simon Foster
·
Jan. 29, 18 · Tutorial
Like (9)
Save
Tweet
Share
7.88K Views

Join the DZone community and get the full member experience.

Join For Free

Last week, I looked at testing the UI of mobile apps, this week lets look at how we could do a similar thing for websites.

Testing the user interface is not an excuse for a lack of unit tests. Testing the user interface takes longer, so for keep creating your small unit tests that can be run after every build. That said, lets look at how you create a UI test.

Create a Unit Test project as normal. Now install the following nuget packages:

Selenium.WebDriver.ChromeDriver
Selenium.WebDriver
Selenium.WebDriver.PhantomJS.Xplatform

I am going to be using Selenium to achieve my website testing, and I am going to concentrate on the Chrome browser. However, packages exist for other browsers, so have a look at the following, and I expect there are others as well.

Selenium.WebDriver.IEDriver
Selenium.Firefox.WebDriver

Selenium started life as a plugin for Firefox to help create automated tests, however, the latest version of Firefox is not compatible with the plugin as I write this. I have not had to install any plugins or extensions to my browsers to achieve my testing.

Enough talk - lets write a test. First, we create two instance variables to store the baseURL and the driver for the browser you are using.

private string baseURL = "https://www.example.com/";
private RemoteWebDriver driver;

Next, we need to set things up for the test to run. This creates an instance of the Chrome driver, maximizes the window, and sets it to wait 30 seconds before timing out.

[TestInitialize()]
public void MyTestInitialize()
{
    driver = new ChromeDriver();
    driver.Manage().Window.Maximize();
    driver.Manage().Timeouts().ImplicitlyWait(TimeSpan.FromSeconds(30));
}

Now comes the actual test. We navigate to a URL and then compare the title of the page loaded with a known value with an Assert statement like you would find in a unit test.

[TestMethod]
public void CheckBrowserTitle()
{
    driver.Navigate().GoToUrl(this.baseURL);
    Assert.AreEqual("Home Page", driver.Title);
}

Finally, we need to tidy up after ourselves.

[TestCleanup()]
public void MyTestCleanup()
{
    driver.Quit();
}

If you are used to writing tests you will know that the are usually constructed in three sections Arrange, Act and Assert. The Arrange is done in the initialize method, which makes the actual test much simpler, the first line does the Act and the last line does the Assert.

Now we have written a simple test lets look at something more complex.

driver.FindElementByLinkTest("click")

This finds any Link on the page which is click. Be careful as the string need to be exactly what appears on screen it may well be easier to specify by id or class or something that doesn't change as often. By adding .click() on the end of this command Selenium will click on the link and you can navigate to a new page.

What about submitting form data? Well you can find the element you want to fill in and add .SendKeys("example text") or .Submit() and this will fill in and submit form data.

What about a screenshot?
Screenshot ss = driver.GetScreenshot();
ss.SaveAsFile("test.jpg",System.Drawing.Imaging.ImageFormat.Jpeg);

I have only just started playing around with web UI tests but you can see there is a fair bit you can do.

unit test

Published at DZone with permission of Simon Foster, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • A Simple Union Between .NET Core and Python
  • Best Practices for Writing Clean and Maintainable Code
  • Core Machine Learning Metrics
  • DevOps Roadmap for 2022

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: