Making cross browser tests beautiful

Making Cross-Browser Tests Beautiful

Outline ● Why

● How

● Case Study

● Problems

● Solutions

● Lessons Learned

What do you expect to get out of this session?

Why

● Gives confidence the application works the same in all browsers

● Can easily test changes in browsers

● Saves time from manually testing all features

How

● Answer the following questions:

○ Which browsers will be supported?

○ What is the most important workflow test?

○ How will the tests be run?

TASK:Build automated tests for a student loan refinance application

PROBLEM:Don’t know how application works in other browsers

SOLUTION:Implement automatedcross-browser tests

Step 1: Decide supported browsers

Step 2: Decide what will be automated

● Determine what is the most critical workflow to test

Step 3: Decide how to run tests

● Run tests in CI

● Need access to all

supported browsers

● Consider cloud testing tools

Step 4: Write tests!

It should be as easy as changing the driver, right?

Problem 1: Page Elements

On page elements

● Dropdowns, radio buttons and checkboxes are tricky

● Use the same locator for all browsers

● Stick to CSS when possible

Element is not clickable

Problem 2:Timing Issues

On timing issues...

● Some drivers are faster than others

● Discrepancies between physical and virtual machines

● Need to wait for elements

Implicit Waits

● Set for the entire duration of the webDriver object

● Tells WebDriver to wait for X units of time

Explicit Waits

● Confined to a particular web element

● Tells WebDriver to wait for the element up until X units of time

Problem 3: Driver Capabilities

Drivers are not created equally

● Drivers are managed by different individuals

● Native capabilities differ

● Same functionality isn’t always available

File Upload

The Safari Driver is implemented in JS and does not have the privileges necessary to manipulate an <input type = “file”> element. Therefore, the SafariDriver does not support file uploads.

Resolution

● Maximize browser window

● Set a specific resolution at run-time

● Scroll an element into view

Soon, the Cross-Browser Tests were complete!

Lessons Learned...

Start testing early.

Automate one feature first.

Run tests in CI regularly.

Questions?

LinkedIn: meaghan-lewisTwitter: @iammeaghanlewis

Email: [email protected]