The Quickest Route to Learn How to Automate Tests with BDD (WebdriverIO, Cucumber, and JavaScript/TypeScript)
In a previous post (please read it if you haven’t read it) I have already mentioned the basics that will allow you to get started in test automation with code:
- Programming basics
- Automated testing concepts
- A programming language
- Test automation basics
- An automation framework
- Version control tools
I another post I talked about The quickest route to learn test automation using Playwright and Javascript/Typescript (mi favorito recientemente) as test automation framework and Javascript/Typescript as programming language, but, if you want/need to implement BDD, Playwright is not the best one, so I prefer WebdriverIO instead. So, this is the route I will show you today.
Why WebdriverIO + Cucumber + JavaScript/TypeScript?
When it comes to end-to-end (E2E) test automation for web applications, WebdriverIO stands out as a popular, modern solution. It is highly flexible, provides an excellent developer experience, and integrates well with other tools and frameworks—particularly the Cucumber BDD framework. In this guide, we’ll explore why combining WebdriverIO, Cucumber, and JavaScript/TypeScript is such a powerful approach, and how you can get started quickly even if you’re coming from a manual testing background.
WebdriverIO
- Modern & Developer-Friendly: WebdriverIO offers a clean syntax and a suite of powerful commands that make it easier to write tests compared to traditional Selenium setups.
- Rich Ecosystem: Its plugins and community support help you integrate with various tools (like reporting, CI/CD pipelines, etc.) and keep your project maintainable.
- Webdriver & DevTools Protocol: Under the hood, WebdriverIO can leverage both the traditional W3C WebDriver protocol and Chrome DevTools protocol, giving you versatility in test scenarios and debugging.
Cucumber (Behavior-Driven Development)
- Readable Feature Files: Cucumber enables writing test scenarios in a Gherkin syntax (Given-When-Then), which is easily understood by team members from different backgrounds (developers, testers, product owners, etc.).
- Collaborative: BDD encourages collaboration and shared understanding, which is especially helpful if you’re transitioning from purely manual testing.
- Easy Step Definition Mapping: Cucumber’s step definitions tie directly into your WebdriverIO commands, ensuring a seamless flow from scenario definition to automated execution.
JavaScript/TypeScript
- JavaScript Familiarity: JavaScript is the go-to language for modern web development. If you’re new to coding, it’s a great choice because of its popularity and extensive ecosystem.
- TypeScript Advantages: TypeScript adds static typing on top of JavaScript. This reduces runtime errors, improves tooling (like IntelliSense), and makes refactoring easier in large codebases.
- Widespread Community & Support: You’ll find plenty of examples, libraries, and resources online in both JS and TS, making troubleshooting and learning much smoother.
Getting Started
The first step, with no doubts, is to familiarize ourselves with the basics of test automation.
Let’s start with User Interface tests. Our basis would be: test logic, data and configurations, design patterns such as Page Object Model and Screenplay, assertions, locators, locator strategies, retries and timeouts, test parameterization, Mocks/Stubs, logs, reports, execution and orchestration, exception handling and maintainability.
You can support yourself on the web Test Automation University to explore concepts like Setting a Foundation for Successful Test Automation and Web Element Locator Strategies.
Also, you need to get familiar with what BDD is (and what it isn’t). Read these posts (if you haven’t) to get familiar with basic concepts, how examples are used, what is Gherkin, what are scenarios, feature files, steps and step definitions:
BDD in practice: from Gherkin to source code
Then, I highly recommend taking a WebriverIO course that covers the basics of Javascript/Typescript for Testing. We don’t need to know everything about a programming language to start contributing to software projects dedicated to testing. I clarify that an automated test suite is a software project itself and, so, we must apply good development practices, but we don’t need to be experts in this language (in this case, Javascript/Typescript).
What we do really need to go further in is the knowledge of the test automation framework, in this case WebdriverIO and Cucumber. Understanding everything we can achieve with the framework, knowing the configuration, installation, how to parameterize the tests, how to run and filter them, how to work with different data sources, timeouts, retries, visual testing, reports and the different integrations available, will allow us to get the most out of the framework.
As mentioned before, when we work with BDD is essential to domain how examples are used, what is Gherkin, what are scenarios, feature files, steps and step definitions, as that is what allows us to implement BDD in the correct way.
So your main focus is to learn the basics of the programming language and a lot about the automation framework (WebdriverIO) and BDD.
I recommend the course Automated Software Testing with WebdriverIO (in english), which has a chapter “HTML + Javascript for Testers” with everything you need in Javascript/Typescript to automate and everything you need in WebdriverIO.
Practices makes Perfect
You won’t achieve very much if you don’t practice what you’re learning. Here is a list of websites you can use to practice test automation:
- PHP Travels a website where you can book flights, hotels, tours and cars.
- Orange HRM a complete human resources management system.
- Parabank: online banking system.
- Juice Shop: an online store. You can install this project locally and apply all the changes you want. It was created for the purpose of running security tests, but it is also useful for user interface testing.
- XYZ Bank: a banking app, much simpler than Parabank. This is probably the easiest on the list to start your first automation suite.
- Automation Exercise: a shopping cart that even designed the tests (you just have to automate them).
Start with the one that seems easiest to you (in my opinion XYZ Bank), design the cases and automate them.
Lean on Artificial Intelligence
With the right prompts, Artificial Intelligence can help you designing test cases and automating them, creating test data, creating the page objects and so forth.
These AI tools not only help you automate, but they also explain to you step by step (line by line of code) what it is doing (basically its logic for creating the code). It is not perfect, but our testing logic comes into play and we can ask it for improvements, based on what we want to achieve with a particular test (we decide if its approach is relevant or not, if a locator element can/should be improved, if the assertions are the best we could be using).
Take advantage of the help of this tool while you are learning to automate.