Kwo Ding


Test Automation Consultant
Applitools Webinar


September 2021
How to check your tests without running them
WEBINAR
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
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
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”
POPULAR CODE CONVENTIONS: JAVASCRIPT
Source: https:/
/github.com/outsideris/popularconvention
POPULAR CODE CONVENTIONS: JAVASCRIPT
Source: https:/
/github.com/outsideris/popularconvention
POPULAR CODE CONVENTIONS: JAVASCRIPT
Source: https:/
/github.com/outsideris/popularconvention
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
WHY LINTING?
Costs
Design Development Production
without executing code!
Standardization, code conventions
Maintainability
Readability
Pre-code review
Finding syntax errors, bugs
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)
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
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
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
Demo


eslint-plugin-ui-testing
https:/
/github.com/kwoding/eslint-plugin-ui-testing
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
Thank you
Kwo Ding
Test Automation
Consultant, SDET
kwo@ding.it


/in/kwoding


@dingkwo

ESLint Plugin for UI Tests

  • 1.
    Kwo Ding Test AutomationConsultant Applitools Webinar September 2021 How to check your tests without running them WEBINAR
  • 2.
    WHO AM I? KwoDing 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? “Lintingis 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 havemy 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 Tabs2 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 DevelopmentProduction without executing code! Standardization, code conventions Maintainability Readability Pre-code review Finding syntax errors, bugs
  • 10.
    WHAT DOES LINTINGMEAN 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 FORUI 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 ITFIT IN YOUR WORKFLOW? Live feedback while coding in your code editor >_ Run from the command line As part of build process, CI pipeline
  • 15.
  • 16.
    KEY TAKEAWAYS Improve collaboration withdevelopers 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 TestAutomation Consultant, SDET kwo@ding.it /in/kwoding @dingkwo