FOWA London 2015 The open web platform using HTML, CSS, and JavaScript is the best: write once, run everywhere, platform that we have created but it is far from perfect. The subtle differences between browsers whether on desktop or mobile platforms make cross-browser testing a daily requirement. Adrian will take you on a behind-the-scenes tour of the WebDriver architecture and standardisation work. He will show just how easy it is to get up and running with your own WebDriver tests and run the same test across different browsers.

1. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 1/52
A behind­the­scenes look at cross­
browser testing with WebDriver
Adrian Bateman
Microsoft Edge
@adrianba

2. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 2/52
Customer called; says the site doesn't
work in their browser.

3. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 3/52
And your boss says this project needs to
work in IE8.

4. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 4/52
Trying to understand how your code was
supposed to work.

5. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 5/52
Why? Just why?
window.mobileCheck = function() { var check = false;
(function(a){if(/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|
kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|
symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1‐6]i|770s|
abac|ac(er|oo|s‐)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|‐m|r |s )|avan|be(ck|ll|nq)|
bl(ac|az)|br(e|v)w|bumb|bw‐(n|u)|c55/|capi|ccwa|cdm‐|cell|chtm|cldc|cmd‐|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc‐s|devi|dica
do(c|p)o|ds(12|‐d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4‐7]0|os|wa|ze)|fetc|fly(‐|_)|g1 u|g560|gene|gf‐5|g‐mo|go(.w|o
un)|haie|hcit|hd‐(m|p|t)|hei‐|hi(pt|ta)|hp( i|ip)|hs‐c|ht(c(‐| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i‐(20|go|ma)|i230|iac( |‐|/
idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc‐|kyo(c|k)|le(no|xi)|lg( g|/(k|
54|‐[a‐w])|libw|lynx|m1‐w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m‐cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(‐| |o
mt(50|p1|v )|mwbp|mywa|n10[0‐2]|n20[2‐3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)‐|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(t
owg1|p800|pan(a|d|t)|pdxg|pg(13|‐([1‐8]|c))|phil|pire|pl(ay|uc)|pn‐2|po(ck|rt|se)|prox|psio|pt‐g|qa‐a|qc(07|12|21|32|60|
i‐)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h‐|oo|p‐)|sdk/|se(c(‐|0|1)|47|mc|nd|ri)|sgh‐|s
(‐|m)|sk‐0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h‐|v‐|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|a(gt|lk)|tcl‐|tdg‐|t
tim‐|t‐mo|to(pl|sh)|ts(70|m‐|m3|m5)|tx‐9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0‐3]|‐v)|vm40|voda|vulc|vx(
61|70|80|81|83|85|98)|w3c(‐| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas‐|your|zeto|zte‐/i.test(a.substr(0,4))) check = tr
(navigator.userAgent||navigator.vendor||window.opera); return check; }

6. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 6/52
The best "write once, run everywhere"
platform so far

7. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 7/52
But far from perfect...

8. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 8/52
Report cross­browser site issues at
WebCompat.com

9. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 9/52
Can't you just all use WebKit?

10. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 10/52
The web is so successful and powerful
because it isn't controlled by one group,
project, or organisation.

11. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 11/52
As web developers, we do need to test
in different browsers.

12. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 12/52
"But testing is so expensive!"

13. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 13/52
Introducing Selenium
Selenium is an open source project providing a suite
of tools to automate web browsers across many
platforms.
http://seleniumhq.org/

14. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 14/52
Selenium WebDriver
A remote control interface to instruct the behaviour
of web browsers.

15. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 15/52
The WebDriver specification is
standardised by a group at W3C.
http://www.w3.org/testing/browser/

16. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 16/52
By many of the largest browser vendors,
who are making it a native part of their
browser.

17. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 17/52
And by some of the largest sites on the
web, who use it for their testing.

18. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 18/52
Simple code example
IWebDriver driver = new XXXDriver(); // e.g. FirefoxDriver
// Navigate to start page
driver.Navigate().GoToUrl("http://www.bing.com/");
// Clear input box and type search
driver.FindElement(By.Id("sb_form_q")).Clear();
driver.FindElement(By.Id("sb_form_q")).SendKeys("dogs");
// Click search button
driver.FindElement(By.Id("sb_form_go")).Click();
// Find the result we want and click it
driver.FindElement(By.LinkText("Images")).Click();

19. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 19/52
Simple. Just write code.

20. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 20/52
Installing the Selenium IDE
http://docs.seleniumhq.org/download/

21. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 21/52
Selenium IDE

22. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 22/52
Recording a test

23. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 23/52

24. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 24/52

25. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 25/52
Replaying the test

26. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 26/52

27. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 27/52
Exporting the test

28. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 28/52

29. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 29/52
What about other browsers?

30. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 30/52

31. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 31/52
Support for WebDriver in Microsoft Edge
Release version of Web Driver ("Current Branch")
Preview version of Web Driver (Windows Insiders)
http://aka.ms/webdriver
http://aka.ms/webdriver­preview

32. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 32/52

33. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 33/52
Strategies for testing

34. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 34/52
Comprehensive example
[Test]
public void AsALoggedUserIamAbleToAdd10ProductsAndSubmitOrder()
{
var signInPage = InitialPage.NavigateTo<SignInPage>();
signInPage.EnterEmail("jd@test.com");
signInPage.EnterPassword("1qaz");
var page = signInPage.ClickLogin();
page.Should().BeOfType<HomePage>();
var homePage = page.As<HomePage>();
var targetDetailsPage = homePage.ClickFirstProduct();
targetDetailsPage.Title.Should().Be("Product Details");
var detailsPage = targetDetailsPage.As<ProductDetailsPage>();
detailsPage.SetQuantity(10);
detailsPage.Total.Should().Be(150);
var targetDeliveryDetailsPage = detailsPage.ClickOrderNow();
targetDeliveryDetailsPage.Title.Should().Be("Product Delivery");
targetDeliveryDetailsPage.Should().BeOfType<PhysicalDeliveryDetailsPage>();
var deliveryDetailsPage = targetDeliveryDetailsPage.
As<PhysicalDeliveryDetailsPage>();
deliveryDetailsPage.FillForm(new DeliveryPhysicalModel()
{
CompanyName = "Contoso",

35. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 35/52
WebDriver Architecture

36. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 36/52
WebDriver Architecture

37. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 37/52
New session

38. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 38/52
Navigate

39. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 39/52
Finding an element

40. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 40/52
Finding an element

41. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 41/52
Send keys

42. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 42/52
Finding a link with text

43. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 43/52
Clicking a link

44. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 44/52
Ending a session

45. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 45/52
Shutdown

46. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 46/52
Testing in the cloud

47. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 47/52
Getting stuff done
The more we worked on WebDriver we realised that
it isn't just for testing.

48. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 48/52
Using WebDriver to help with bug triage

49. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 49/52
Here's the deal
We're going to continue working hard to make
browsers more interoperable.

50. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 50/52
Your role
Find a testing framework that you like and use it.
Keep us honest. Tell us when things are broken.

51. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 51/52
Microsoft Edge support for WebDriver
WebDriver status page:
http://aka.ms/webdriver­status

52. 10/7/2015 A behind-the-scenes look at cross-browser testing with WebDriver
file:///Users/thoule/Desktop/A%20behind-the-scenes%20look%20at%20cross-browser%20testing%20with%20WebDriver.html#/ 52/52
Thank you!
or
Slides:
@MSEdgeDev @adrianba
http://aka.ms/webdriver­fowa