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.
Handwritten Text Recognition for manuscripts and early printed texts
A behind the-scenes look at cross-browser testing with web driver, Adrian Bateman
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 behindthescenes 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.
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 crossbrowser 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/webdriverpreview
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/webdriverstatus
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/webdriverfowa