By applying linting (static code analysis) tools to test code, preferably the same tools as for application code, tests can be improved which can eventually lead to better maintainability, readability and more robust tests, without even running them!

1. Kwo Ding
Test Automation Consultant
Applitools Webinar
September 2021
How to check your tests without running them
WEBINAR

2. WHO AM I?
Kwo Ding
Test Automation
Consultant, SDET
About Kwo
Over 15 years experience in software testing
Focus on implementing test automation strategies and
designing test architecture
Specialize in automation of web, mobile and API testing
International speaker at conferences and meetups, such as SeleniumConf,
SauceCon, TestGuild and Applitools Future of Testing
Based in the Netherlands
kwo@ding.it
/in/kwoding
@dingkwo

3. WHAT IS LINTING?
“Linting is the process of running a
program that will analyze code for
potential errors”
“Lint, or a linter, is a tool that
analyzes source code to flag
programming errors, bugs, stylistic
errors, and suspicious constructs.”
- Wikipedia
AKA static code analysis

4. WHY LINTING?
“
”
“I have my own coding style”
“I dislike semi-colons at the end of the line (JavaScript)”
“I find the opening curly brace on a new line better for readability”
“A new line between each statement increases readability”

5. POPULAR CODE CONVENTIONS: JAVASCRIPT
Source: https:/
/github.com/outsideris/popularconvention

6. POPULAR CODE CONVENTIONS: JAVASCRIPT
Source: https:/
/github.com/outsideris/popularconvention

7. POPULAR CODE CONVENTIONS: JAVASCRIPT
Source: https:/
/github.com/outsideris/popularconvention

8. CODE STYLE COMPARISON
Tabs 2 spaces
2 but 4 spaces
not flagged
2 spaces
Semicolon Required Required No
Trailing Commas Required Required No
Template strings Prefer No preference No preference
Space before function parentheses None None Required
Underscored functions None Allowed Allowed
In common:
- Tabs: 2-Spaces
- Quotes: Single
- Prefer const over var: Yes
- No trailing spaces: True

9. WHY LINTING?
Costs
Design Development Production
without executing code!
Standardization, code conventions
Maintainability
Readability
Pre-code review
Finding syntax errors, bugs

10. WHAT DOES LINTING MEAN FOR TEST CODE?
All of the above, but more concrete:
Contribute to less flaky test code, better
locators, no hard waits
Maintainable tests, following
conventions, structured
Collaboration with developers, really
talking the “same” language
CI/CD requires rapid feedback, linting
provides feedback while writing test
code
Costs
Design Writing test code Running tests
(pipeline)

11. Ruleset
- Code conventions, indentation, curly braces
etc.
- Test should contain assertion
- No hard waits/sleeps
- Should not use implicit waits
- Avoid using locator tied to page layout
- …
HOW DOES IT WORK?
Source code Analysis Result
Abstract Syntax Tree (AST)
astexplorer.net

13. ESLINT PLUGIN FOR UI TESTING
Successor of Sonar WebDriver plugin
Started with WebdriverIO
Born from saving time when reviewing test code
Expanded to also support other automation tools
(Cypress, Playwright, Puppeteer, TestCafe)
Goal to automatically check test code on good test
coding practices
https:/
/github.com/kwoding/eslint-plugin-ui-testing

14. HOW DOES IT FIT IN YOUR WORKFLOW?
Live feedback while coding in your code editor
>_ Run from the command line
As part of build process, CI pipeline

15. Demo
eslint-plugin-ui-testing
https:/
/github.com/kwoding/eslint-plugin-ui-testing

16. KEY TAKEAWAYS
Improve collaboration
with developers
Get early feedback on
test code (potential flaws)
Apply application code linting rules
also for test code
Enable linter for
code conventions
Use custom linting rules, e.g. for team/
organization code conventions
Start small with new linting
rules, customize accordingly

17. Thank you
Kwo Ding
Test Automation
Consultant, SDET
kwo@ding.it
/in/kwoding
@dingkwo