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 8 months ago

Public Feedback

comment Suggest improvements to the Speaker
  • Pallavi ...
    By Pallavi ...  ~  7 months ago
    reply Reply

    Hi Shi 

    Good pain point picked for the talk, i have a few questions about it - 

    a. Somehow i feel your talk is moving towards accessibility testing? is it? 

    b. when you say adding ARIA attributes to the html elements, the devs need to know about these aspects to make the applications accessible, and then the team, and it should be a business decision, i am just trying to find a way to narrow down the approach of the talk and audience in here who would benefit from it.

    c. the css and xpath selectors which you would be teaching to be created using 'aria' selectors can be used with selenium locators? would that be the outcome of the talk?

    d. will you be taking a demo application and showing actual live coding and execution of  scripts? if yes what would be the programming language you would be using? 

    e. is 20 minutes a good time for the talk? what time have you thought you would allocate for Q and A?

    Let me know.

    Thanks

    Pallavi

    • Shi Ling Tai
      By Shi Ling Tai  ~  6 months ago
      reply Reply

      Hi Pallavi,

      Thank you for your remarks, and sorry for the slow response!

      a. It's not about accessibility testing. It's about how web developers can build more testable websites, by simply making their websites more accessible. I know that the audience is made of mostly QAs, and not web developers, but I think it's worth illustrating how bad HTML code translate to unmaintainable tests because at the end of the day it is up to QAs to advocate writing testable code and to advocate accessibility on the user's behalf. This talk is meant for both web developers and QAs, and I would love for QAs to share my talk with their web developers.

      b. As mentioned in the point above, the talk is actually meant for both web developers and QAs, because the talk is about testability - which is a two way conversation - and I know it can be difficult to convince web developers to take accessibility seriously. I want to share my perspective about a business case for accessibility, which is test-automation-enablement and more readable and maintainable tests, reducing time spent on test maintenance and onboarding new QAs. It's killing two birds with one stone. :)

      c. Yes, I'll be showing how to create more readable and maintainable CSS and XPATH selectors based on ARIA attributes. I will also be showing how implementing non-semantic UI components without proper fallbacks makes it very difficult for QAs to produce good tests - e.g. using <divs> for custom dropdown input instead of native <select> or calendar-only date input fields. The takeaway for QAs is real examples for QAs to educate web developers on build more testable UI components.

      d. I won't be live-coding, instead I will create a series of CodePens to demo typical testable and untestable UI components. That will it'll be easy for audience to inspect the examples at their leisure after the talk.

      e. 45 minutes would probably be better to give sufficient time to look at 4 - 5 different examples of untestable UI components and how they can be made more testable - e.g. datepickers, dropdown inputs, radio buttons, icon buttons, table rows with action buttons.

      • Shi Ling Tai
        By Shi Ling Tai  ~  6 months ago
        reply Reply

        I've updated the title, outline, and schedule. Please let me know if you have any feedback! :)

        • Pallavi ...
          By Pallavi ...  ~  6 months ago
          reply Reply

          Thats great Shi! just a small suggestion if you can kindly rephrase the title. thats all. i look forward to this talk. hopefully so. all the best.

          • Shi Ling Tai
            By Shi Ling Tai  ~  6 months ago
            reply Reply

            Thanks for the feedback :)

            Argh, it's hard to come up with a good title.

            Does "Accessibility and Testability - two sides of the same coin" click?

            • Pallavi ...
              By Pallavi ...  ~  6 months ago
              reply Reply

              :) much better Shi.

              Thanks. 

  • Deepti Tomar
    By Deepti Tomar  ~  7 months ago
    reply Reply

    Hello Shi Ling,

    Thanks for your proposal!
    Could you please update the Outline/Structure section of your proposal with a time-wise breakup of how you plan to use 20 mins for the topics you've highlighted?

    And, to help the program committee understand your presentation style, can you provide a link to your past recording or record a small 1-2 mins trailer of your talk and share the link to the same? 

    Thanks!


  • Liked 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.

  • Liked 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.

  • Liked Gaurav Singh
    keyboard_arrow_down

    Gaurav Singh - How to build an automation framework with selenium : patterns and practices

    Gaurav Singh
    Gaurav Singh
    Lead SDET
    Gojek
    schedule 9 months 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!

  • Liked 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
    Trimble
    schedule 8 months 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