Workshop: Automate web application using selenium and UI framework objects/APIs

We all love the tagline - Selenium automates browsers. Selenium provides self sufficient APIs for automating any user workflow exactly like an end user does. But as a automation engineer we see both side of the coin together. There is nothing simpler than selenium to interact with browser but same time selenium comes with a set of prerequisite before doing what exactly we want. Locator lookup strategy, page rendering frequency, event triggering and last but not least the wait context are some of those challenges we face in day to day basis while automating our apps. Other than that most of the latest UI frameworks comes with different set of UI controls which are sometime challenging to interact with only using selenium. In this workshop I would like to target fixing few of those issues by using the UI framework internals of application under test. Some specific use cases I will be sharing as part of this workshop are are as follows:

  • Performing actions directly using ui framework objects/APIs
  • Handling dynamic ids
  • Automating charts/graphs rendered in a canvas element

For demonstration purpose I would limit the scope of this workshop to three web UI frameworks - AngularJs, ExtJs and ReactJs and see how we can use application framework internals to fix issues high lighted above along with selenium.


Outline/Structure of the Workshop

1. Introduction and use cases where UI framework internals can help in automation (10 mins)

  • Performing actions directly using UI framework objects/APIs
  • Handling dynamic ids
  • Handling following UI controls:

1) Input

2) Date picker

3) Multiselect

4) Grids

  • Automating charts/graphs rendered in a canvas element

2. Automate AngularJS application (25 mins):

  • Inspect angular application
  • Use angular scope to perform actions
  • Handling the use cases mentioned above

3. Automate ExtJs application (25 mins)

  • Inspect extjs application
  • Use component query to perform actions
  • Handling the use cases mentioned above

4. Automate ReactJs application (25 mins)

  • Inspect rectjs application
  • Use components, props and test utils to perform actions
  • Handling the use cases mentioned above

5. Closure and additional questions - 5 mins

Learning Outcome

You will learn:

  • Understanding the approach of using UI framework internals for automation.
  • Using technologies like ExtJS component query, Angular scope, React props for solving some common UI automation issues.

Target Audience

Automation Engineers (Selenium/Appium) having basic knowledge of java script

Prerequisites for Attendees

  • Laptop with internet connection.
  • Knowledge of Selenium/Appium and JavaScript basics.
  • Chrome browser
schedule Submitted 3 years ago

  • Anuradha Konduri

    Anuradha Konduri / Keertika Gangwar - How we are reducing Test Failure Analysis time using Machine Learning at Expedia

    45 Mins

    How many of us have spent those hours just to check Automation run reports to first determine whether it was an actual bug or environment specific issue or an automation issue. We agree that no matter how much robust we make our UI Automation frameworks, we always encounter Automation/Environment specific failures which increase the time spent on analysing those failures and spotting actual issues/defects. At some point, all of us have had a bad day where we see so many flaky tests, that we lose confidence in the reliability of UI Automation results and tend to ignore the results over a period of time. We propose a solution to help us overcome this problem using the most trending technology of last decade - Machine Learning. The fact that we run around 130k test runs a day with around 2.3 million test records saved in MongoDB every month motivated us to look into Machine Learning as an approach for the problem statement we have.

    What if we can use ML algorithms to find patterns in the day-to-day UI Automation error messages that we see, to tell us if it is - an actual bug or not !!! All of us use various Selenium based Test Automation frameworks like Cucumber, TestNG, Scalatest, Nightwatch JS etc. which have their own libraries to report any Test Validation/Automation failures, hence vary quite a lot in the formats. Also, it's difficult to find a common pattern in user defined error messages. A typical error message from UI Automation would have the - Message Stack Traces , other error data dumped from Selenium etc. We can argue that we can take only the Message part of this as input to be able to predict the outcome for us. However, we have seen many instances where these Messages are not very self-explanatory and we will have to look into the trace/error details to actually determine the root cause. Considering the whole error message is not as easy as it sounds.

    Hence, the problem we have at hand is unstructured text data. Our approach includes the steps -> Collect Training data (viz., pre-classified errors), Clean the data to be fed to the model, Identify a simple yet powerful algorithm such as SVM, Random Forest, Naive Bayes etc., Classifiers to work with, Tune the model to identify the right metrics to help us calculate the reliability of the resultant predictions.

    This can also be extended to other error messages like Javascript Error Messages, Splunk or Trace logs as well.