SlideShare a Scribd company logo
3
Most read
4
Most read
5
Most read
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 Tests
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
Ad

Recommended

Editor config, eslint, prettier
Editor config, eslint, prettier
Samundra khatri
 
Modern UI Development With Node.js
Modern UI Development With Node.js
Ryan Anklam
 
Introduction to .NET Core
Introduction to .NET Core
Marco Parenzan
 
WebRTC presentation
WebRTC presentation
Veselin Pizurica
 
CI/CD Overview
CI/CD Overview
An Nguyen
 
The Many Ways to Test Your React App
The Many Ways to Test Your React App
All Things Open
 
What is an API Gateway?
What is an API Gateway?
LunchBadger
 
Restful Integration with WSO2 ESB
Restful Integration with WSO2 ESB
WSO2
 
CI/CD
CI/CD
AmitDhodi
 
Angularjs PPT
Angularjs PPT
Amit Baghel
 
Angular
Angular
Mouad EL Fakir
 
Balkan - data eng meetup - data fusion
Balkan - data eng meetup - data fusion
Balkan Misirli
 
Selenium with Cucumber
Selenium with Cucumber
Knoldus Inc.
 
learn what React JS is & why we should use React JS .
learn what React JS is & why we should use React JS .
paradisetechsoftsolutions
 
Api application programming interface
Api application programming interface
Mohit Bishnoi
 
Introduzione ad angular 7/8
Introduzione ad angular 7/8
Valerio Radice
 
OpenAPI 3.0, And What It Means for the Future of Swagger
OpenAPI 3.0, And What It Means for the Future of Swagger
SmartBear
 
Android Session.pdf
Android Session.pdf
20TUCS033DHAMODHARAK
 
Automation With Appium
Automation With Appium
Knoldus Inc.
 
Angular 2
Angular 2
Nigam Goyal
 
AngularJS
AngularJS
NexThoughts Technologies
 
"DevOps > CI+CD "
"DevOps > CI+CD "
Innovation Roots
 
android app development training report
android app development training report
Rishita Jaggi
 
Apidays Paris 2023 - Securing Microservice-based APIs, Michal Trojanowski, Cu...
Apidays Paris 2023 - Securing Microservice-based APIs, Michal Trojanowski, Cu...
apidays
 
APIsecure 2023 - Exploring Advanced API Security Techniques and Technologies,...
APIsecure 2023 - Exploring Advanced API Security Techniques and Technologies,...
apidays
 
What is Angular?
What is Angular?
Albiorix Technology
 
Github copilot
Github copilot
ssuser30b5d4
 
Selenium Testing Project report
Selenium Testing Project report
Kapil Rajpurohit
 
The state of JavaScript Linting - English version
The state of JavaScript Linting - English version
Michael Kühnel
 
Writing Custom Lint for Android.pdf
Writing Custom Lint for Android.pdf
FBeigirad
 

More Related Content

What's hot (20)

CI/CD
CI/CD
AmitDhodi
 
Angularjs PPT
Angularjs PPT
Amit Baghel
 
Angular
Angular
Mouad EL Fakir
 
Balkan - data eng meetup - data fusion
Balkan - data eng meetup - data fusion
Balkan Misirli
 
Selenium with Cucumber
Selenium with Cucumber
Knoldus Inc.
 
learn what React JS is & why we should use React JS .
learn what React JS is & why we should use React JS .
paradisetechsoftsolutions
 
Api application programming interface
Api application programming interface
Mohit Bishnoi
 
Introduzione ad angular 7/8
Introduzione ad angular 7/8
Valerio Radice
 
OpenAPI 3.0, And What It Means for the Future of Swagger
OpenAPI 3.0, And What It Means for the Future of Swagger
SmartBear
 
Android Session.pdf
Android Session.pdf
20TUCS033DHAMODHARAK
 
Automation With Appium
Automation With Appium
Knoldus Inc.
 
Angular 2
Angular 2
Nigam Goyal
 
AngularJS
AngularJS
NexThoughts Technologies
 
"DevOps > CI+CD "
"DevOps > CI+CD "
Innovation Roots
 
android app development training report
android app development training report
Rishita Jaggi
 
Apidays Paris 2023 - Securing Microservice-based APIs, Michal Trojanowski, Cu...
Apidays Paris 2023 - Securing Microservice-based APIs, Michal Trojanowski, Cu...
apidays
 
APIsecure 2023 - Exploring Advanced API Security Techniques and Technologies,...
APIsecure 2023 - Exploring Advanced API Security Techniques and Technologies,...
apidays
 
What is Angular?
What is Angular?
Albiorix Technology
 
Github copilot
Github copilot
ssuser30b5d4
 
Selenium Testing Project report
Selenium Testing Project report
Kapil Rajpurohit
 
Balkan - data eng meetup - data fusion
Balkan - data eng meetup - data fusion
Balkan Misirli
 
Selenium with Cucumber
Selenium with Cucumber
Knoldus Inc.
 
learn what React JS is & why we should use React JS .
learn what React JS is & why we should use React JS .
paradisetechsoftsolutions
 
Api application programming interface
Api application programming interface
Mohit Bishnoi
 
Introduzione ad angular 7/8
Introduzione ad angular 7/8
Valerio Radice
 
OpenAPI 3.0, And What It Means for the Future of Swagger
OpenAPI 3.0, And What It Means for the Future of Swagger
SmartBear
 
Automation With Appium
Automation With Appium
Knoldus Inc.
 
android app development training report
android app development training report
Rishita Jaggi
 
Apidays Paris 2023 - Securing Microservice-based APIs, Michal Trojanowski, Cu...
Apidays Paris 2023 - Securing Microservice-based APIs, Michal Trojanowski, Cu...
apidays
 
APIsecure 2023 - Exploring Advanced API Security Techniques and Technologies,...
APIsecure 2023 - Exploring Advanced API Security Techniques and Technologies,...
apidays
 
Selenium Testing Project report
Selenium Testing Project report
Kapil Rajpurohit
 

Similar to ESLint Plugin for UI Tests (20)

The state of JavaScript Linting - English version
The state of JavaScript Linting - English version
Michael Kühnel
 
Writing Custom Lint for Android.pdf
Writing Custom Lint for Android.pdf
FBeigirad
 
Don't Leave Windows Broken
Don't Leave Windows Broken
Ken William
 
JavaScript Static Analysis Tools and Techniques - STP Online Session 2013
JavaScript Static Analysis Tools and Techniques - STP Online Session 2013
Noah Sussman
 
20151117 es lint
20151117 es lint
Nakajima Shigeru
 
JavaScript Tools Overview
JavaScript Tools Overview
Scott Povlot
 
Understanding TDD - theory, practice, techniques and tips.
Understanding TDD - theory, practice, techniques and tips.
Malinda Kapuruge
 
presentation des google test dans un contexte de tdd
presentation des google test dans un contexte de tdd
Thierry Gayet
 
1Sem-MTech-Design For Verification Notes-Unit2-Verification Tools
1Sem-MTech-Design For Verification Notes-Unit2-Verification Tools
Dr. Shivananda Koteshwar
 
Testing practicies not only in scala
Testing practicies not only in scala
Paweł Panasewicz
 
Put to the Test
Put to the Test
Kevlin Henney
 
Security testing of YUI powered applications
Security testing of YUI powered applications
dimisec
 
The Death of Flaky Tests by Dave Haeffner
The Death of Flaky Tests by Dave Haeffner
Sauce Labs
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
Christian Heilmann
 
Static Code Analysis and AutoLint
Static Code Analysis and AutoLint
Leander Hasty
 
Tackling Accessibility
Tackling Accessibility
Anthony Delorie
 
Test Driven Development
Test Driven Development
Sergey Aganezov
 
Build testable react app
Build testable react app
Malang QA Community
 
Automatically Customizing Static Analysis Tools to Coding Rules Really Follow...
Automatically Customizing Static Analysis Tools to Coding Rules Really Follow...
Yuki Ueda
 
Five steps towards your testing dream
Five steps towards your testing dream
Lisa Gagarina
 
The state of JavaScript Linting - English version
The state of JavaScript Linting - English version
Michael Kühnel
 
Writing Custom Lint for Android.pdf
Writing Custom Lint for Android.pdf
FBeigirad
 
Don't Leave Windows Broken
Don't Leave Windows Broken
Ken William
 
JavaScript Static Analysis Tools and Techniques - STP Online Session 2013
JavaScript Static Analysis Tools and Techniques - STP Online Session 2013
Noah Sussman
 
JavaScript Tools Overview
JavaScript Tools Overview
Scott Povlot
 
Understanding TDD - theory, practice, techniques and tips.
Understanding TDD - theory, practice, techniques and tips.
Malinda Kapuruge
 
presentation des google test dans un contexte de tdd
presentation des google test dans un contexte de tdd
Thierry Gayet
 
1Sem-MTech-Design For Verification Notes-Unit2-Verification Tools
1Sem-MTech-Design For Verification Notes-Unit2-Verification Tools
Dr. Shivananda Koteshwar
 
Testing practicies not only in scala
Testing practicies not only in scala
Paweł Panasewicz
 
Security testing of YUI powered applications
Security testing of YUI powered applications
dimisec
 
The Death of Flaky Tests by Dave Haeffner
The Death of Flaky Tests by Dave Haeffner
Sauce Labs
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
Christian Heilmann
 
Static Code Analysis and AutoLint
Static Code Analysis and AutoLint
Leander Hasty
 
Automatically Customizing Static Analysis Tools to Coding Rules Really Follow...
Automatically Customizing Static Analysis Tools to Coding Rules Really Follow...
Yuki Ueda
 
Five steps towards your testing dream
Five steps towards your testing dream
Lisa Gagarina
 
Ad

More from Applitools (20)

Code and No-Code Journeys: The Coverage Overlook
Code and No-Code Journeys: The Coverage Overlook
Applitools
 
Creating Automated Tests with AI - Cory House - Applitools.pdf
Creating Automated Tests with AI - Cory House - Applitools.pdf
Applitools
 
Navigating EAA Compliance in Testing.pdf
Navigating EAA Compliance in Testing.pdf
Applitools
 
AI-Assisted, AI-Augmented & Autonomous Testing
AI-Assisted, AI-Augmented & Autonomous Testing
Applitools
 
Code or No-Code Tests: Why Top Teams Choose Both
Code or No-Code Tests: Why Top Teams Choose Both
Applitools
 
The ROI of AI-Powered Testing, presented by Applitools
The ROI of AI-Powered Testing, presented by Applitools
Applitools
 
Building No-code Autonomous E2E Tests_Applitools.pdf
Building No-code Autonomous E2E Tests_Applitools.pdf
Applitools
 
Conquer 6 Testing Challenges_Applitools.pdf
Conquer 6 Testing Challenges_Applitools.pdf
Applitools
 
Autonomous End-to-End Testing for Online Banking Applications Presented with ...
Autonomous End-to-End Testing for Online Banking Applications Presented with ...
Applitools
 
Playwright Visual Testing Best Practices, presented by Applitools
Playwright Visual Testing Best Practices, presented by Applitools
Applitools
 
Cross-Browser and Cross-Device Testing | Applitools in Action
Cross-Browser and Cross-Device Testing | Applitools in Action
Applitools
 
Advanced Debugging Techniques | Applitools in Action.pdf
Advanced Debugging Techniques | Applitools in Action.pdf
Applitools
 
AI-Powered Testing Strategies for the Seasonal Shopping Surge.pdf
AI-Powered Testing Strategies for the Seasonal Shopping Surge.pdf
Applitools
 
Test Automation for Dynamic Applications _ Applitools in Action.pdf
Test Automation for Dynamic Applications _ Applitools in Action.pdf
Applitools
 
Proven Approaches to AI-Powered E2E Testing.pdf
Proven Approaches to AI-Powered E2E Testing.pdf
Applitools
 
Applitools Autonomous 2.0 Sneak Peek.pdf
Applitools Autonomous 2.0 Sneak Peek.pdf
Applitools
 
Building the Ideal CI-CD Pipeline_ Achieving Visual Perfection
Building the Ideal CI-CD Pipeline_ Achieving Visual Perfection
Applitools
 
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Applitools
 
Streamlining Your Tech Stack: A Blueprint for Enhanced Efficiency and Coverag...
Streamlining Your Tech Stack: A Blueprint for Enhanced Efficiency and Coverag...
Applitools
 
Visual AI for eCommerce: Improving Conversions with a Flawless UI
Visual AI for eCommerce: Improving Conversions with a Flawless UI
Applitools
 
Code and No-Code Journeys: The Coverage Overlook
Code and No-Code Journeys: The Coverage Overlook
Applitools
 
Creating Automated Tests with AI - Cory House - Applitools.pdf
Creating Automated Tests with AI - Cory House - Applitools.pdf
Applitools
 
Navigating EAA Compliance in Testing.pdf
Navigating EAA Compliance in Testing.pdf
Applitools
 
AI-Assisted, AI-Augmented & Autonomous Testing
AI-Assisted, AI-Augmented & Autonomous Testing
Applitools
 
Code or No-Code Tests: Why Top Teams Choose Both
Code or No-Code Tests: Why Top Teams Choose Both
Applitools
 
The ROI of AI-Powered Testing, presented by Applitools
The ROI of AI-Powered Testing, presented by Applitools
Applitools
 
Building No-code Autonomous E2E Tests_Applitools.pdf
Building No-code Autonomous E2E Tests_Applitools.pdf
Applitools
 
Conquer 6 Testing Challenges_Applitools.pdf
Conquer 6 Testing Challenges_Applitools.pdf
Applitools
 
Autonomous End-to-End Testing for Online Banking Applications Presented with ...
Autonomous End-to-End Testing for Online Banking Applications Presented with ...
Applitools
 
Playwright Visual Testing Best Practices, presented by Applitools
Playwright Visual Testing Best Practices, presented by Applitools
Applitools
 
Cross-Browser and Cross-Device Testing | Applitools in Action
Cross-Browser and Cross-Device Testing | Applitools in Action
Applitools
 
Advanced Debugging Techniques | Applitools in Action.pdf
Advanced Debugging Techniques | Applitools in Action.pdf
Applitools
 
AI-Powered Testing Strategies for the Seasonal Shopping Surge.pdf
AI-Powered Testing Strategies for the Seasonal Shopping Surge.pdf
Applitools
 
Test Automation for Dynamic Applications _ Applitools in Action.pdf
Test Automation for Dynamic Applications _ Applitools in Action.pdf
Applitools
 
Proven Approaches to AI-Powered E2E Testing.pdf
Proven Approaches to AI-Powered E2E Testing.pdf
Applitools
 
Applitools Autonomous 2.0 Sneak Peek.pdf
Applitools Autonomous 2.0 Sneak Peek.pdf
Applitools
 
Building the Ideal CI-CD Pipeline_ Achieving Visual Perfection
Building the Ideal CI-CD Pipeline_ Achieving Visual Perfection
Applitools
 
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Applitools
 
Streamlining Your Tech Stack: A Blueprint for Enhanced Efficiency and Coverag...
Streamlining Your Tech Stack: A Blueprint for Enhanced Efficiency and Coverag...
Applitools
 
Visual AI for eCommerce: Improving Conversions with a Flawless UI
Visual AI for eCommerce: Improving Conversions with a Flawless UI
Applitools
 
Ad

Recently uploaded (20)

The Anti-Masterclass Live - Peak of Data & AI 2025
The Anti-Masterclass Live - Peak of Data & AI 2025
Safe Software
 
Introduction to Agile Frameworks for Product Managers.pdf
Introduction to Agile Frameworks for Product Managers.pdf
Ali Vahed
 
Zoho Creator Solution for EI by Elsner Technologies.docx
Zoho Creator Solution for EI by Elsner Technologies.docx
Elsner Technologies Pvt. Ltd.
 
Why Every Growing Business Needs a Staff Augmentation Company IN USA.pdf
Why Every Growing Business Needs a Staff Augmentation Company IN USA.pdf
mary rojas
 
HYBRIDIZATION OF ALKANES AND ALKENES ...
HYBRIDIZATION OF ALKANES AND ALKENES ...
karishmaduhijod1
 
A Guide to Telemedicine Software Development.pdf
A Guide to Telemedicine Software Development.pdf
Olivero Bozzelli
 
IObit Driver Booster Pro 12 Crack Latest Version Download
IObit Driver Booster Pro 12 Crack Latest Version Download
pcprocore
 
Application Modernization with Choreo - The AI-Native Internal Developer Plat...
Application Modernization with Choreo - The AI-Native Internal Developer Plat...
WSO2
 
Microsoft-365-Administrator-s-Guide1.pdf
Microsoft-365-Administrator-s-Guide1.pdf
mazharatknl
 
Milwaukee Marketo User Group June 2025 - Optimize and Enhance Efficiency - Sm...
Milwaukee Marketo User Group June 2025 - Optimize and Enhance Efficiency - Sm...
BradBedford3
 
Advance Doctor Appointment Booking App With Online Payment
Advance Doctor Appointment Booking App With Online Payment
AxisTechnolabs
 
Automated Migration of ESRI Geodatabases Using XML Control Files and FME
Automated Migration of ESRI Geodatabases Using XML Control Files and FME
Safe Software
 
Enable Your Cloud Journey With Microsoft Trusted Partner | IFI Tech
Enable Your Cloud Journey With Microsoft Trusted Partner | IFI Tech
IFI Techsolutions
 
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Muhammad Fahad Bashir
 
Building Geospatial Data Warehouse for GIS by GIS with FME
Building Geospatial Data Warehouse for GIS by GIS with FME
Safe Software
 
Heat Treatment Process Automation in India
Heat Treatment Process Automation in India
Reckers Mechatronics
 
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
dheeodoo
 
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
2nd Sight Lab
 
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
Maharshi Mallela
 
Foundations of Marketo Engage - Programs, Campaigns & Beyond - June 2025
Foundations of Marketo Engage - Programs, Campaigns & Beyond - June 2025
BradBedford3
 
The Anti-Masterclass Live - Peak of Data & AI 2025
The Anti-Masterclass Live - Peak of Data & AI 2025
Safe Software
 
Introduction to Agile Frameworks for Product Managers.pdf
Introduction to Agile Frameworks for Product Managers.pdf
Ali Vahed
 
Zoho Creator Solution for EI by Elsner Technologies.docx
Zoho Creator Solution for EI by Elsner Technologies.docx
Elsner Technologies Pvt. Ltd.
 
Why Every Growing Business Needs a Staff Augmentation Company IN USA.pdf
Why Every Growing Business Needs a Staff Augmentation Company IN USA.pdf
mary rojas
 
HYBRIDIZATION OF ALKANES AND ALKENES ...
HYBRIDIZATION OF ALKANES AND ALKENES ...
karishmaduhijod1
 
A Guide to Telemedicine Software Development.pdf
A Guide to Telemedicine Software Development.pdf
Olivero Bozzelli
 
IObit Driver Booster Pro 12 Crack Latest Version Download
IObit Driver Booster Pro 12 Crack Latest Version Download
pcprocore
 
Application Modernization with Choreo - The AI-Native Internal Developer Plat...
Application Modernization with Choreo - The AI-Native Internal Developer Plat...
WSO2
 
Microsoft-365-Administrator-s-Guide1.pdf
Microsoft-365-Administrator-s-Guide1.pdf
mazharatknl
 
Milwaukee Marketo User Group June 2025 - Optimize and Enhance Efficiency - Sm...
Milwaukee Marketo User Group June 2025 - Optimize and Enhance Efficiency - Sm...
BradBedford3
 
Advance Doctor Appointment Booking App With Online Payment
Advance Doctor Appointment Booking App With Online Payment
AxisTechnolabs
 
Automated Migration of ESRI Geodatabases Using XML Control Files and FME
Automated Migration of ESRI Geodatabases Using XML Control Files and FME
Safe Software
 
Enable Your Cloud Journey With Microsoft Trusted Partner | IFI Tech
Enable Your Cloud Journey With Microsoft Trusted Partner | IFI Tech
IFI Techsolutions
 
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Muhammad Fahad Bashir
 
Building Geospatial Data Warehouse for GIS by GIS with FME
Building Geospatial Data Warehouse for GIS by GIS with FME
Safe Software
 
Heat Treatment Process Automation in India
Heat Treatment Process Automation in India
Reckers Mechatronics
 
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
dheeodoo
 
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
2nd Sight Lab
 
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
Maharshi Mallela
 
Foundations of Marketo Engage - Programs, Campaigns & Beyond - June 2025
Foundations of Marketo Engage - Programs, Campaigns & Beyond - June 2025
BradBedford3
 

ESLint Plugin for UI Tests

  • 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 [email protected] /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
  • 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 [email protected] /in/kwoding @dingkwo