Installation Process

Tools

• Git: https://git-scm.com/
• Github Desktop: https://desktop.github.com/
• Node JS: https://nodejs.org/en/
• VS Code: https://code.visualstudio.com/
• Google Chrome: https://www.google.com/intl/en_ph/chrome/
• Sharex (Screenshot tool): https://getsharex.com/

Installing Webdriverio

• Refer to wdio getting started documentation: https://webdriver.io/docs/gettingstarted
• Initialize webdriverio project using the following command in the vs code terminal: npm init wdio .
• Setting up wdio config will have some initial questions. Here are the answers for installing webdriverio-cucumber-ts

• If you encounter some chromedriver issues, you can just edit the version in the package.json and run npm install again

• Run npm run wdio to test if webdriverio installation works. it will run the sample project that is included in the webdriver installation

VS Code Extensions

Cuke Step-Definition generator

• This extension helps with generating step definitions from feature files. After filling up the feature file, highlight the steps then right click to use cuke's generate step definition function

Wdio related

• JavaScript and TypeScript Nightly by Microsoft
• Cucumber
• JavaScript (ES6) code snippets

General use extensions

• vscode-icons (For better project folder icons)
• Prettier (Code formatter to clean up codes)
• Path Intellisense
• NPM Intellisense
• Code Runner
• DotENV

Google Chrome Plugins

• Selectors hub (for generating xpath): https://chrome.google.com/webstore/detail/selectorshub/ndgimibanhlabgdgjcpbbndiehljcpfh?hl=en
• Screen recorder: https://chrome.google.com/webstore/detail/screen-recorder/hniebljpgcogalllopnjokppmgbhaden