making cross browser tests beautiful

34
Making Cross-Browser Tests Beautiful

Upload: meaghan-lewis

Post on 11-Jan-2017

93 views

Category:

Software


0 download

TRANSCRIPT

Page 1: Making cross browser tests beautiful

Making Cross-Browser Tests Beautiful

Page 2: Making cross browser tests beautiful

Outline ● Why

● How

● Case Study

● Problems

● Solutions

● Lessons Learned

Page 3: Making cross browser tests beautiful

What do you expect to get out of this session?

Page 4: Making cross browser tests beautiful

Why

● Gives confidence the application works the same in all browsers

● Can easily test changes in browsers

● Saves time from manually testing all features

Page 5: Making cross browser tests beautiful

How

● Answer the following questions:

○ Which browsers will be supported?

○ What is the most important workflow test?

○ How will the tests be run?

Page 6: Making cross browser tests beautiful

TASK:Build automated tests for a student loan refinance application

Page 7: Making cross browser tests beautiful
Page 8: Making cross browser tests beautiful

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

Page 9: Making cross browser tests beautiful

SOLUTION:Implement automatedcross-browser tests

Page 10: Making cross browser tests beautiful

Step 1: Decide supported browsers

Page 11: Making cross browser tests beautiful

Step 2: Decide what will be automated

● Determine what is the most critical workflow to test

Page 12: Making cross browser tests beautiful

Step 3: Decide how to run tests

● Run tests in CI

● Need access to all

supported browsers

● Consider cloud testing tools

Page 13: Making cross browser tests beautiful

Step 4: Write tests!

Page 14: Making cross browser tests beautiful

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

Page 15: Making cross browser tests beautiful

Problem 1: Page Elements

Page 16: Making cross browser tests beautiful

On page elements

● Dropdowns, radio buttons and checkboxes are tricky

● Use the same locator for all browsers

● Stick to CSS when possible

Page 17: Making cross browser tests beautiful

Element is not clickable

Page 18: Making cross browser tests beautiful
Page 19: Making cross browser tests beautiful

Problem 2:Timing Issues

Page 20: Making cross browser tests beautiful

On timing issues...

● Some drivers are faster than others

● Discrepancies between physical and virtual machines

● Need to wait for elements

Page 21: Making cross browser tests beautiful

Implicit Waits

● Set for the entire duration of the webDriver object

● Tells WebDriver to wait for X units of time

Page 22: Making cross browser tests beautiful

Explicit Waits

● Confined to a particular web element

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

Page 23: Making cross browser tests beautiful

Problem 3: Driver Capabilities

Page 24: Making cross browser tests beautiful

Drivers are not created equally

● Drivers are managed by different individuals

● Native capabilities differ

● Same functionality isn’t always available

Page 25: Making cross browser tests beautiful

File Upload

Page 26: Making cross browser tests beautiful

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.

Page 27: Making cross browser tests beautiful

Resolution

Page 28: Making cross browser tests beautiful

● Maximize browser window

● Set a specific resolution at run-time

● Scroll an element into view

Page 29: Making cross browser tests beautiful

Soon, the Cross-Browser Tests were complete!

Page 30: Making cross browser tests beautiful

Lessons Learned...

Page 31: Making cross browser tests beautiful

Start testing early.

Page 32: Making cross browser tests beautiful

Automate one feature first.

Page 33: Making cross browser tests beautiful

Run tests in CI regularly.