Scaling End-to-End User Interface Tests

At Slack, Quality is a shared responsibility. The Quality Engineering team is focused on creating a culture of testing, increasing test coverage, and helping the company ship high-quality features faster. We encourage all our developers to write and own end-to-end (E2E) tests. In turn, Quality Engineering (QE) is responsible for the frameworks used and provides…

Slack logo
Slack
•
Kavita Chodavarapu
•6 min read•beginner•
--
•View Original
ChefCSSJavaScriptPythonTypeScript

Overview

The article discusses Slack's approach to scaling end-to-end (E2E) user interface tests by creating a reusable automation framework. It highlights the challenges faced with initial implementations and the solutions developed to improve test maintainability and reduce flakiness.

What You'll Learn

1

How to implement a reusable automation framework for E2E tests using Cypress

2

Why using a Page Object Model can improve test maintainability

3

How to reduce test flakiness by implementing best practices in UI testing

Prerequisites & Requirements

  • Understanding of end-to-end testing concepts
  • Familiarity with Cypress for test automation

Key Questions Answered

What framework did Slack use for end-to-end testing?
Slack adopted Cypress as the framework for running end-to-end tests, initially developed during an internal hackathon. This framework allowed for rapid adoption and contributions from engineers, although it faced challenges like duplicate code and flaky tests.
What best practices did Slack implement to improve E2E tests?
Slack established several best practices, such as using custom 'data-qa' attributes for element selection, limiting the creation of new components, and ensuring that methods within a component only modify the relevant UI. These practices aimed to enhance test readability and maintainability.
How did Slack reduce flakiness in their tests?
By implementing a UI Abstraction/Page Object Model, Slack achieved a 60% reduction in test flakiness. This approach allowed for better organization of tests and made it easier for both automation and front-end engineers to add and maintain tests.

Key Statistics & Figures

Reduction in test flakiness
60%
This statistic reflects the improvement achieved after migrating tests to the UI Abstraction framework.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Testing Framework
Cypress
Used for running end-to-end tests at Slack.

Key Actionable Insights

1
Implement a UI abstraction layer to simplify test writing and maintenance.
This approach allows for a centralized definition of UI actions, making tests more readable and easier to manage, especially in complex applications like Slack.
2
Utilize custom 'data-qa' attributes for element selection in tests.
This practice ensures that selectors remain stable even when underlying class names or IDs change, reducing the likelihood of test failures due to UI updates.
3
Limit the creation of new components to only those necessary for tests.
By focusing on essential components, you can avoid unnecessary complexity and maintain a cleaner test structure, which aids in both readability and maintainability.

Common Pitfalls

1
Allowing duplicate code and flaky tests due to lack of structure in test writing.
This often occurs when there are no guidelines for adding tests, leading to inconsistent implementations and increased maintenance efforts.

Related Concepts

End-to-end Testing
Test Automation Frameworks
Page Object Model