Web Driver IO with TypeScript and Cucumber 📝

Introduction

• Speaker: Shadab Sakhi
• Topic: Web Driver IO series using TypeScript and Cucumber

Series Outline

1. Prerequisites: Basic programming knowledge and understanding of TypeScript.
2. Official Documentation: Exploring and configuring Web Driver IO.
3. Writing Test Cases: Creating, executing, and customizing/optimizing using Page Object Design Pattern.
4. Adding Test Cases: Covering daily basis commands and functionality.
5. Hooks: Exploring hooks in testing.
6. Reporting: Integrating a reporting tool.

Prerequisites

• Basic programming knowledge.
• Basic knowledge of TypeScript.
• Basic understanding of element locators and finding elements on the webpage.

Documentation Overview

• Web Driver IO Web Page: Features a lively robotic logo and several menus.
  • Docs: Houses all the necessary documentation.
  • API: Includes all Web Driver IO functional APIs.
  • Blogs: Recent happenings and updates.
  • Contribute: Guidelines on how to contribute to Web Driver IO.
  • Community: Resources and options for seeking help.

Configuration Steps

1. Explore Documentation: What is Web Driver IO, getting started, boilerplate projects, cool concepts, configuration guides, reporting, services, API functions, blogs, contribution guidelines, community support, version information.
2. Setting Up the Project: Using Visual Studio Code and Node.js.
   • Download Visual Studio Code: Simple setup by downloading and installing the EXE file.
   • Download Node.js: Install and configure Node.js.
     • Verify installation using node -v and npm -v commands.
3. Creating the First Project:
   • Create and navigate to the project folder.
   • Add the folder to Visual Studio Code.

Initial Setup

1. Initialize Node.js Project: npm init or npm init -y for default settings.
   • Package name, version, description, entry point, test command, repository, keywords, author, and license.
2. Installing Web Driver IO CLI: npm install @wdio/cli

Configuration Helper

1. Running Configuration Helper: npx wdio config -y

   • Automation backend location: Local Machine
   • Framework: Cucumber
   • Compiler: TypeScript
   • Feature files location and step definitions location
   • Generate default test cases and use page object design pattern
   • Reporters: Spec Reporter and Allure Reporter
   • Services: Chrome Driver
   • Base URL

2. Configuring TypeScript Support: Add typescript packages to tsconfig.json

   • tsconfig.json file creation and content

Project Structure

• package.json: Management of dependencies (similar to pom.xml in Maven).
• node_modules: Stores downloaded dependencies.
• wdio.conf.js: Configuration file for Web Driver IO.
• features folder: Contains default feature files and step definitions.
• page object model: Default page locators.

Next Steps

1. Run Default Tests: Execute the default test cases created.
2. Write and Execute Our Own Test Cases: Understanding the setup and writing our first test case.

Summary

• Covered prerequisites and explored the official Web Driver IO documentation.
• Configured Web Driver IO following the official documentation.
• Generated and checked default test cases.
• Next video: Executing default test cases and writing first custom test case.

Conclusion

• Ensure all prerequisites are met before starting.
• Follow along with the documentation for configuration steps.
• Use generated test cases to verify configuration.
• Look out for the next tutorial on writing and executing custom test cases.