Accessibility and Testability - two sides of the same coin

What makes a UI testable?

If you've ever struggled with testing icon buttons, sliders, datepickers, you know what I mean. Those things are a pain to test, and the tests you've written is probably not very maintainable either.

Here's an argument on making UI more accessible - it's means your UI is more testable too - let me show you what I mean.

 
 

Outline/Structure of the Talk

[45 min]

  • [5 min] Introduction
    • [2 min] Why this topic matters - testability is a two-way conversation between QAs and the engineering team, and QAs need to know how to advocate good practices to enable test automation so that they themselves can write higher quality tests.
    • [3 min] Examples of un-testable UI components - datepickers, custom dropdown components, radio buttons, icon buttons, table rows with action buttons, etc.
      • Examples of nasty tests we try to write for un-testable UI components
      • What bad tests mean for the business:
        • More unstable tests, more time spent on test maintenance
        • Difficult on-boarding for new QAs because tests have unreadable selectors and are overly complex
        • QA team's morale impacted when stakeholders question the ROI of automated tests
  • [5 min] What makes a UI testable?
    • Custom components using semantic HTML, e.g. using < input > instead of for radio buttons and checkboxes, or using < select >
      for dropdowns
    • Properly labelling elements using best practices like setting `title` attribute or ARIA attributes and the
    • Basically, practices that make the UI accessible
  • [25 min] How to make UI components testable with 4 - 5 examples
    • 4-5 Codepen examples showing un-testable and testable UI components, and how tests would look like for both versions.
      • based on common UI components that QAs frequently find challenging - datepickers, custom dropdown components, radio buttons, icon buttons, table rows with action buttons, etc.
      • We'll spend 5 minute each per example.
  • [2 min] Conclusion to re-emphasize key points
  • [8 min] FAQs

Learning Outcome

What makes a web page testable and un-testable and how to build testable components.

Target Audience

QAs and web developers

Prerequisites for Attendees

Audience should have basic knowledge about HTML and how to write CSS and XPATH selectors

schedule Submitted 3 years ago

  • Shweta Sharma
    keyboard_arrow_down

    Shweta Sharma / Nikita Jain - Accessibility testing 101

    45 Mins
    Talk
    Beginner

    "This world is such a beautiful place to live in." If you can read the first sentence without any screen readers or assistance, you're privileged. As technologists, shouldn’t we be more empathetic towards differently-abled people and make all parts of our website accessible to them? In my humble opinion, the true power of technology can be identified when it reaches out to people of all kinds having different physical or psychological challenges. We not only legally bound to provide Accessibility but also it should be considered as our moral responsibility.

    As testers, we have a wonderful opportunity to contribute to Accessibility by ensuring that the site is accessible in many different ways. Although it is impossible to identify all the issues that exist around Accessibility in the world, we are lucky enough to still understand a majority of them. With this understanding, there have been many measures taken in order to make your site accessible. But, don’t forget - we are QA engineers. We got to ensure that the site is accessible as per the standards set by WCAG 2.0 (AA) by testing for accessibility using various tools and techniques.

  • Abhijeet Vaikar
    keyboard_arrow_down

    Abhijeet Vaikar - End-end test code as a first class citizen

    45 Mins
    Case Study
    Intermediate

    "All tests in today's automated regression run have been marked as Untested. What happened?"

    "No notifications are being sent for test runs on the channel"

    "I pulled latest code, and the framework dependency shows compilation error"

    "What does this new method in the framework do?"

    How often do you hear such things within your team?

    As Quality champions, we need to walk the talk. When we expect our developers to write quality code, write unit tests, build features without introducing bugs, the onus lies on us (as test engineers) to do the same. With almost every test engineering team writing automated tests to check functionality of their products and services, it becomes very important to ensure that the test automation framework and the test scripts are bug-free and follow good standards of software engineering.

    It cannot be stressed enough that test automation code should be as good as production code. In order to build production-quality test automation framework and scripts, a number of steps can be taken at:

    1. Code & System Level

    2. Process & People Level

    Our test engineering team went through a transition from having random & unexpected failing test runs to having greater confidence in the quality of the tests. Learn from this case study of our journey to ensure that end-end UI automated tests are built with quality in mind. We will also see demonstration of some of the use cases.

  • Gaurav Singh
    keyboard_arrow_down

    Gaurav Singh - How to build an automation framework with Selenium : Patterns and practices

    Gaurav Singh
    Gaurav Singh
    Software Engineer
    Meta
    schedule 3 years ago
    Sold Out!
    45 Mins
    Talk
    Beginner

    With an ever increasing no of businesses being conducted on web the testing need to write automated tests for the app's UI is something that can never be ignored. As you all know Selenium provides an API that enables us to do this quite effectively.

    However, when tasked with setting up the automation framework, there are a lot of questions that arise in the minds of aspiring test developers regardless of what level they are in their career.


    Some of such questions are:

    1. How does one actually go about the business of building a robust and effective automation framework on top of selenium?
    2. What are the elementary building blocks to include in the framework that an aspiring automation developer should know of?
    3. How should we model our tests? XUnit style vs BDD?
    4. Are there good practices, sensible design patterns and abstractions that we can follow in our code?
    5. What are some of the anti patterns/common mistakes we should avoid

    A lot of literature, documentation and blogs exists on these topics on the web already.

    However In this talk,

    I would combine this existing knowledge and my years of experience in building automation frameworks and breakdown these elements and walk you through exactly the sort of decisions/considerations and practices that you can take while starting to implement or improve the UI automation for your team.

    Hope to see you there!

  • Vijay Ravindran
    keyboard_arrow_down

    Vijay Ravindran - Automation on Unity Engine application - Ways to automate Unity Game Engine applications using Unity Test Runner and Autoplay,Selenium tool.

    Vijay Ravindran
    Vijay Ravindran
    Sr. QAE
    AVEVA Solutions
    schedule 3 years ago
    Sold Out!
    45 Mins
    Tutorial
    Beginner

    Unity 3D game engine is used to develop games and enterprise application development in multiple platform which is compatible across devices. It is an excellent cross development tool, especially used for Next-Gen technologies like augmented and virtual reality applications.

    As everyone is familiar with the terms like appium, selenium for automation in mobile application, it's quite a big challenge and uncertain when it comes to automation in mobile application built in Unity engine. Here we will discuss about the solution on automating unity built application using following methods:

    1. Using Unity Test Runner - which comes with Unity application using [UnityTest] attribute
    2. Using AutoPlay, Selenium - Similar to web testing with inspector and web driver protocol support.

    Method 1 : Unity Test Runner

    • The Unity Test Runner is a tool that tests your code in both Edit mode and Play mode, and also on target platforms such as Standalone, Android, or iOS.
    • The Unity Test Runner uses a Unity integration of the NUnit library, which is an open-source unit testing library for .Net languages.
    • [UnityTest Attribute] - Addition to the standard NUnit library for the Unity Test Runner.

    Method 2: Using AutoPlay and Selenium

    • Inspect game scene
    • Manage game on real devices (install / uninstall, start / stop, etc)
    • Run Selenium tests (with all base selenium actions like click, getText, swipe, get elements property, etc)
    • Write test on any programming language (Java, C#, python, etc)

    Looking forward to meet you all in SeleniumConf 2020

help