Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Behavior Driven Web UI Automation with Selenium and Cucumber/SpecFlow (BDDx London, 11/11/2016)

678 views

Published on

BDD is a method that focuses on defining the requirements based on the expected behavior; DDD is a method that uses a ubiquitous language all across the solution; UX helps design user interactions based on user behavior… and Selenium WebDriver (or similar) is a tool that is mostly used to ignore all these and automate the app using clicks on HTML elements…

In this session you will explore options how to improve testing efficiency by looking at UI automation from a different angle by analyzing and understanding the UI concepts used in the application, matching them to domain model elements and build an automation solution that focuses on these.

Published in: Software
  • Login to see the comments

Behavior Driven Web UI Automation with Selenium and Cucumber/SpecFlow (BDDx London, 11/11/2016)

  1. 1. Behavior Driven Web UI Automation with Selenium and Cucumber/SpecFlow BDDx, London 11th November 2016 Gáspár Nagy coach • trainer • bdd addict • creator of specflow @gasparnagy • gaspar@specsolutions.eu
  2. 2. Copyright © Gaspar NagyCopyright © Gaspar Nagy bddaddict.com bdd addict given.when.then CAUTION! on the stage
  3. 3. Copyright © Gaspar NagyCopyright © Gaspar Nagy There are problems with UI testing! script expressed using UI terms modeling gap between UI terms and domain model terms sloooow for a bigger app the feedback loop gets uselessly long brittle browsers changing, environment changes, cross- platform issues, etc.
  4. 4. Copyright © Gaspar NagyCopyright © Gaspar Nagy You are here*! *hopefully
  5. 5. Copyright © Gaspar NagyCopyright © Gaspar Nagy A decent app
  6. 6. Copyright © Gaspar NagyCopyright © Gaspar Nagy With an ugly test…
  7. 7. Copyright © Gaspar NagyCopyright © Gaspar Nagy Unclear purpose Code duplication Anti- semantic locators Wrong abstraction Timing issues
  8. 8. Copyright © Gaspar NagyCopyright © Gaspar Nagy Unclear purpose – BDD • Automated tests are investments for the future • Tests without clearly specified goal are only good until they pass • BDD/SpecFlow/Cucumber are great tools for helping you to connect purpose for the automation steps • Scenario title – defines the goal (“The one where …”) • Scenario steps – provide a functional grouping for the automation steps
  9. 9. Copyright © Gaspar NagyCopyright © Gaspar Nagy Introduce SpecFlow/Cucumber
  10. 10. Copyright © Gaspar NagyCopyright © Gaspar Nagy Introduce SpecFlow/Cucumber
  11. 11. Copyright © Gaspar NagyCopyright © Gaspar Nagy Code duplication – Page Objects • A small change in the application should only make a small impact on the automation solution • Automated tests should support you for applying changes and not hold you back • Page Objects can help you to encapsulate the automation logic for particular UI elements • Page Objects mirror the page structure • They represent an automation layer below the step definitions • Driver pattern is a generalization of the page object pattern for non-UI automation tasks • They can serve as the interface for switching from UI automation to API-level automation
  12. 12. Copyright © Gaspar NagyCopyright © Gaspar Nagy Introduce Page Objects
  13. 13. Copyright © Gaspar NagyCopyright © Gaspar Nagy Introduce Page Objects
  14. 14. Copyright © Gaspar NagyCopyright © Gaspar Nagy Introduce Page Objects
  15. 15. Copyright © Gaspar NagyCopyright © Gaspar Nagy
  16. 16. Copyright © Gaspar NagyCopyright © Gaspar Nagy Anti-semantic locators • Think about how your users identify the different information (text, data, controls, buttons, etc.) on the page • If the user can find them, you will also find them… be smart!
  17. 17. Copyright © Gaspar NagyCopyright © Gaspar Nagy Locators – Match your solution to the domain • If the solution is modeled on the basis of the problem space, the elements will have semantic identification • Question title – title column in DB – Title property in code - #Title [FindsBy(How = How.Id)] public IWebElement Title { get; set; }
  18. 18. Copyright © Gaspar NagyCopyright © Gaspar Nagy Problem vs. solution domain Concept by Matt Wynne, see also http://dannorth.net/2011/01/31/whose-domain-is-it-anyway/ Problem Domain Solution Domain Tweet • Tweet • Retweet Message • Send • Forward
  19. 19. Copyright © Gaspar NagyCopyright © Gaspar Nagy Locating by ID is not enough! [FindsBy(How = How.Id, Using = "fabric_input")] public IWebElement Fabric { get; set; } fabric fabric_input fabric_list fabric_open @Html.Kendo().ComboBox().Name("fabric") These are internal for the control!
  20. 20. Copyright © Gaspar NagyCopyright © Gaspar Nagy Locating by ID is not enough! [FindsBy(How = How.Id, Using = "cb9eb8be-71…")] public IWebElement Khaki { get; set; }
  21. 21. Copyright © Gaspar NagyCopyright © Gaspar Nagy Be careful with Selenium IDE [FindsBy(How = How.CssSelector, Using = "input.btn.btn-default")] public IWebElement Fabric { get; set; } There was only one button on the page that time!
  22. 22. Copyright © Gaspar NagyCopyright © Gaspar Nagy Define your own location strategy and implement it as a custom locator! [FindsBy(How = How.Custom, CustomFinderType = typeof(TableFieldLocator)] public IWebElement UserName { get; set; } form This is a generic lookup strategy User Name Password input input
  23. 23. Copyright © Gaspar NagyCopyright © Gaspar Nagy public IWebElement UserName { get; set; } Apply conventions with decorators and find the tester’s nirvana… form This is the app-specific lookup strategy User Name Password input input
  24. 24. Copyright © Gaspar NagyCopyright © Gaspar Nagy Unclear purpose Code duplication Anti- semantic locators Wrong abstraction Timing issues
  25. 25. Copyright © Gaspar NagyCopyright © Gaspar Nagy Wrong abstraction
  26. 26. Copyright © Gaspar NagyCopyright © Gaspar Nagy Concept is an idea or mental picture of a group or class of objects formed by combining all their aspects
  27. 27. This gonna save it!
  28. 28. Copyright © Gaspar NagyCopyright © Gaspar Nagy UI Concepts Counter concept, divs and spans Short-text entering concept, input @type=text Multi-line text entering concept, div+javascriptSingle-choice concept, set of input @type=radio Submit concept, span+javascript
  29. 29. Copyright © Gaspar NagyCopyright © Gaspar Nagy Encapsulate automation logic of UI concepts • Selenium’s PageFactory can only map IWebElement or List<IWebElement> • Defining a static helper method is already a good solution • like FillInTextBox(IWebElement elm, string value) • A factory infrastructure, similar to the PageFactory makes it even better
  30. 30. Copyright © Gaspar NagyCopyright © Gaspar Nagy A concept-based page express concepts interact on concept level
  31. 31. Copyright © Gaspar NagyCopyright © Gaspar Nagy Thread.Sleep(3000);
  32. 32. Copyright © Gaspar NagyCopyright © Gaspar Nagy Why do we have this timing problem?
  33. 33. Copyright © Gaspar NagyCopyright © Gaspar Nagy An example Enter text Post form Working, working… Observe result title.SendKeys(…); button.Click(); driver.FindElement(…);
  34. 34. Copyright © Gaspar NagyCopyright © Gaspar Nagy Let’s add some waiting to it! Thread.Sleep(2000); var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(5)); wait.Until(d => d.FindElement(By...)); driver.Manage().Timeouts().ImplicitlyWait(TimeSpan.FromSeconds(5)); ... driver.FindElement(By...); Static waiting Busy/active waiting Implicit busy waiting
  35. 35. Copyright © Gaspar NagyCopyright © Gaspar Nagy An example Enter text Post form Working, working… Observe result title.SendKeys(…); button.Click(); driver.FindElement(…); The thing you are waiting for is here! You are waiting here!
  36. 36. Copyright © Gaspar NagyCopyright © Gaspar Nagy Waiting at the observation step… • Establishes an implicit dependency between the automation code triggering the action (Click) and the assertion (FindElement) • This makes the code brittle, because • you cannot compose new tests easily from the automation steps (e.g. the same assertion after another action) • the code will be sensitive to the order of the assertions • tests will be slowed down unnecessarily
  37. 37. Your user knows* when the action is done *hopefully • Maybe there is a progress indicator • Maybe they look at the browser icon • Maybe they’ll wait till they see the end of the page
  38. 38. Copyright © Gaspar NagyCopyright © Gaspar Nagy An example Enter text Post form Working, working… Observe result title.SendKeys(…); button.SubmitClick(); driver.FindElement(…); Result page loaded
  39. 39. Copyright © Gaspar NagyCopyright © Gaspar Nagy Define the waiting conditions for the interactions of the UI concepts! This is an example… • Submit concept – a concept that can trigger a server-side processing and results either in an error or a success • Success is indicated by a fully loaded page with a success message • Error is indicated by … • Fully loaded page means that the footer is visible • Solution: Implement SubmitConcept.Click() in a way that it clicks the button and is waiting either for the success or the error condition
  40. 40. Copyright © Gaspar NagyCopyright © Gaspar Nagy Other conditions • Wait until progress indicator is unloaded • Wait until injected JavaScript signals that the operation has finished • Wait until protractor signals • You can even put Thread.Sleep there… only to that single place! For all these, you need to isolate Submit/Click from other clicks
  41. 41. *maybe
  42. 42. Gáspár Nagy coach • trainer • bdd addict • creator of specflow @gasparnagy • gaspar@specsolutions.eu Gáspár Nagy coach • trainer • bdd addict • creator of specflow @gasparnagy • gaspar@specsolutions.eu Thank you!

×