Data-Driven Testing | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Advanced Features
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore the concept of data-driven testing , which allows you to run the same test multiple times with different data sets, enhancing efficiency and coverage. What is Data-Driven Testing? Data-driven testing involves executing the same test scenario repeatedly but with varying input data. This approach eliminates the need for repetitive test case creation by simply substituting different data for each run. When to Use Data-Driven Testing This method is particularly useful for testing edge cases . For example, in the Conduit application, we can test the sign-up functionality with various username lengths to validate error messages: 2 characters: "Username is too short. Minimum is 3 characters." 3 characters: No error message. 20 characters: No error message. 21 characters: "Username is too long. Maximum is 20 characters." Implementation Steps Create a new file data-driven.cy.js for the test scenario. Define test data as an array of objects, each containing properties like username , expected error message , and a flag for error display. Use a forEach loop to iterate through the test data and execute the test for each data set. Parameterize the test using the data from the current iteration. Example Test Data Structure const testData = [ { username: '12', errorMessage: 'Username is too short.', isDisplayed: true }, { username: '123', errorMessage: '', isDisplayed: false }, { username: '12345678901234567890', errorMessage: '', isDisplayed: false }, { username: '123456789012345678901', errorMessage: 'Username is too long.', isDisplayed: true } ]; Running the Tests After configuring the test, use the command npx cypress open to run the tests. Ensure that each test case is correctly titled by using template literals to include the username in the test name. In summary, data-driven testing is an efficient way to handle multiple test scenarios with varying data inputs, utilizing arrays of objects and iteration techniques to streamline the testing process.
Video Transcript
Hey guys, welcome back. In this lesson, we will talk about data-driven testing. So first of all, what is data-driven testing? Data-driven testing is when you need to run the same test multiple times, but using a different test data. So instead of copy-pasting your test multiple times, you just replace different data for every run and that way run your test. When do you need to use data-driven testing? Usually, it's helpful for different edge case scenarios. Let me show you one example in our Conduit application where it can be implemented. So this is the Conduit app, and if we go to the sign-up page, for example, we can test different error messages for the sign-up field. For example, if I type just a couple of characters into the fields and click sign-up, we see the different error messages. Invalid email user, 2 short, minimum 3 characters, and password 2 short, minimum 8 characters. But if I add a little bit more, like 3 characters, sign-up, and then I don't see this error message anymore. And if I type a little bit more characters over here, sign-up, let me add a few more, and here we go. Now I have a new error message. Username is too long. Maximum is 20 characters. So technically, we have 4 test cases just for the username field. So 2 characters, 3 characters, 20 characters, and 21 characters. And first, and in the fourth example, error message should be displayed with different error message. And in the second and the third example, error message should not be displayed. So instead of creating 4 different test cases, we can create just a single test case that will run 4 times in the loop using different test data. So let's implement this scenario. I'm going back to our Conduit application, and I configured the initial setup. I created a new data-driven.cy.js and created this scenario with the steps that we want to execute. Site contains sign-up. Click to open the sign-up page. Type username 12, email 12, password 12. Click sign-up, and then in the error messages section, we should contain the text. Username is too short. Minimum is 3 characters. It will be type 12. And like I said, instead of copy-pasting this test, we just data-drive it. And first of all, we need to create the test data. So I create a new constant, and I call it test data. And my test data will be nothing but a simple array of objects. So I create the array and the first object. What data do I need? Let's say for this demo, I will run just a single property. We will test only username. But you can create your objects and test all properties at the same time, for example, including email and password. This demo will be only for the username. So I type username. This will be the first property. And the data that I want to type will be 12. When I type this message, what error message I expect? Error message. And the error message should be this one. Error message is username is too short. And also, I would like to create a flag that I will use later to data-drive the logic inside of the method. Either message is displayed or not. So error is displayed. Displayed. And in this example, the message will be displayed. So I put boolean flag true. And the first data set is ready. So now let's create other three examples of the data sets inside of this array. So this will be two, three, and four. So in the second use case, we will use three characters, right? And the error message related to the username should not be displayed. So I keep just on the username and put here false. Then the next use case, when we have 20 characters. So one, two, three, nine. This is 10. And let me control C, control V. So that's 20 characters. And we also should not see the error message related to the username. So I'll just keep the username and keep it false. The error message should not be displayed. And the last use case is when we have 21 characters. And then message should be displayed like this one. Username is too long and the maximum is 20 characters. And this is the message we expect. All right, test data is ready. Now, how to use it? Then we call this test data object. And what we need is just a simple array, which is a for each loop in the JavaScript. For each and on every cycle of the loop, it will return us a single object. And then inside of this loop, I just take my test and paste it inside. Quickly reformat. That's it. Now we can use this object and just parametrize our test. Instead of typing just one, two, I called data, data dot, and I'm looking for username. That's the username that I'm going to type on each iteration of the cycle. And then I need to validate the error message. And I type data dot and the error message. But remember, we have a different error message. So sometimes message is displayed. Sometimes is not. And we can trigger the validation, either it's displayed or not, by this is error displayed flag. So here I type if error message is displayed. So if it is true, then we want to make this validation that the error message is actually displayed like this. And else, if it is not displayed, then we want to make a different validation that this error message should not contain text, data, and error message. And I guess that's it. The test is configured for all four cases. Now let's check if it is working. So go into terminal, new terminal, npx cypress open. Let's see. So running the test. And this is our spec file. Error is displayed, not defined. Okay, I think I made a mistake. It should be data dot is error is displayed like this. Okay, let's go back. Run it one more time. Okay, now it's working. And look, we are running four tests, one by one executed. And we tested all the use cases. So three characters, 20 characters, and 21 characters. The only one problem we have is that the name of the test is exactly the same every time. So we don't know what exactly each of these tests is testing, right? So let's quickly fix it. We can fix it by updating the test name. Instead of the single quote, I provide the backticks like this. Provide space. And then I can use the reference to the data. And let's say data dot username. And now every time for every test, the username that is under the test will be displayed and the title of the test. Let's go back to the cypress opening. And right now everything working correctly. The same test is executed and correctly titled in the runner. All right, guys, that's it. So let's quickly summarize what we did in this lesson. So when you have a test scenario that you need to run the same scenario again and again, but with a different test data, the data-driven approach, test data-driven approach is the most optimal way. For that, you just create a simple array with your test data, with array of objects. And then using for each loop, iterate through this array. And then use this data inside of your test. And also, additionally, since this array is nothing but a JSON object, you can save this object under the fixture folders like we did before. Articles.json, Text.json is just a JSON object. And then through this Cy.fixture, you can call this object from the fixture files. And then loop through the test data inside of your test. That way, data-driving your test. All right, that's it, guys. I'll see you in the next lesson.