Functional GUI Tests: Test Cases For To-Do List

by Marco 48 views

Hey everyone! Let's dive into functional GUI tests, specifically looking at how we can test a to-do list application. We'll break down the requirements, create test cases based on the Gherkin scenarios, and make sure everything works as expected. This is super important for DevOps teams and anyone involved in testing. When you're testing a user interface (GUI), you're essentially making sure that all the buttons, forms, and interactions behave the way users expect them to. It's all about ensuring a smooth user experience and catching those pesky bugs before they go live. If you are new to software testing, this is an excellent way to familiarize yourself with the process. Testing is one of the most important phases of the software development lifecycle.

Understanding the To-Do List Application

First, let's get a good understanding of our to-do list app. We need to figure out what the core functions are and how users will interact with them. The requirements are straightforward, but we can make this example more robust to handle a variety of scenarios.

The application should allow users to:

  • Add new tasks with names and due dates.
  • See a list of existing tasks.
  • Remove tasks.

There are a few key rules as well:

  • Due dates must be in the future.
  • Tasks can only be added or removed one at a time. This means we will be testing to make sure there is no race condition.

These initial requirements will help us create the test cases for our to-do list application. This is where we convert the user stories and rules into testable steps that we can execute. Now, let's translate these into test scenarios using Gherkin. Gherkin is a great way to write human-readable tests that can be easily understood by both technical and non-technical team members.

Test Scenarios Based on Gherkin

Let's turn those Gherkin scenarios into functional GUI tests. We'll go through each scenario and think about how we'd execute them.

Scenario: Verify Navigation to the Creation Page

Given I am on the home page When I click the "Add Todo" button Then I should be on the task creation page

For this test, we will start on the homepage of the application. Then, we are going to find the add todo button on the page. When we click this button, we will move to the task creation page. This means we will perform a navigation test, making sure the navigation to the task creation page works.

Scenario: Add a Task with Valid Data

Given I am on the task creation page When I fill in the "Task" input with "New Todo" And I fill in the "Due Date" input with "09/10/2030" And I click the "Save" button Then I should see the "Success!" message And the new task "New Todo" should be visible in the list

This test case will check the successful creation of a new task. We are going to make sure the task can be created with the provided input. We'll need to ensure that the application displays a success message, and the newly added task appears in the list. This is probably the most common action you would use for your to-do list.

Scenario: Add a Task with an Empty Description

Given I am on the task creation page When I don't fill the "Task" input And I fill in the "Due Date" input with "09/10/2030" And I click the "Save" button Then I should see the message "Fill the task description" And I should remain on the task creation page

This test will cover the edge case where the user does not fill in the task description. The validation should make sure that the user is not able to add the task.

Scenario: Add a Task with an Empty Date

Given I am on the task creation page When I fill in the "Task" input with "New Todo" And I don't fill the "Due Date" input And I click the "Save" button Then I should see the message "Fill the due date" And I should remain on the task creation page

In this scenario, we'll test the validation of the due date field. If the date field is empty when the user attempts to create a task, we need to make sure an appropriate error message is displayed, and the task is not added.

Scenario: Add a Task with a Past Date

Given I am on the task creation page When I fill in the "Task" input with "New Task" And I fill in the "Due Date" input with "09/10/2001" And I click the "Save" button Then I should see the message "The due date must not be in the past" And I should remain on the task creation page

This test verifies that the application correctly handles invalid dates. If a user tries to create a task with a due date in the past, an error message should be shown. This ensures that the application follows the rule regarding future dates.

Scenario: Remove a Task from the List

Given I am on the home page And a task named "Task to Delete" exists in the list When I click the "Remove" button for the task "Task to Delete" Then I should see the "Success" message And the task "Task to Delete" should no longer be in the list

Finally, this test case validates the removal of a task. We are going to start with a task that is already in the list and verify that when the user clicks remove, the task disappears. Then, we will make sure the success message is displayed.

Test Case Implementation and Execution

Now that we've outlined our test scenarios, let's think about how to actually implement and execute these tests. There are a few ways to approach this, depending on your team's tools and preferences.

Choosing Your Tools

When performing functional GUI tests, you'll need a testing framework or tool. Some popular options include:

  • Selenium: A widely used open-source tool for automating web browsers. It's great for simulating user interactions, like clicking buttons, filling out forms, and navigating pages.
  • Cypress: A modern front-end testing tool designed to be fast and easy to use. Cypress is popular for its time-traveling feature and excellent debugging capabilities.
  • Playwright: Another modern testing framework that supports multiple browsers and platforms. It is known for its reliability and speed.
  • Appium: If you're testing mobile apps, Appium is a great choice. It allows you to automate native, hybrid, and mobile web apps.

Writing the Test Scripts

Once you've selected your tool, you'll start writing the test scripts. These scripts will translate your test scenarios into code. The exact syntax will depend on the tool you're using, but the general process is:

  1. Setup: Open the application in a browser or launch the mobile app.
  2. Actions: Simulate user actions, such as clicking buttons, entering text, and navigating between pages.
  3. Assertions: Verify that the application behaves as expected by checking for specific elements, text, or messages.

Here’s a simplified example using pseudo-code (the actual code will vary depending on your tool):

// Example using pseudo-code
// Test: Add a task with valid data

// 1. Open the app and navigate to the task creation page
openApp();
click("Add Todo");

// 2. Fill in the task name and due date
enterText("Task", "New Todo");
enterText("Due Date", "09/10/2030");

// 3. Click the Save button
click("Save");

// 4. Verify the success message and the new task in the list
assertText("Success!", "Success! Message should be present");
assertElementExists("New Todo", "New task should be present in the list");

This pseudo-code shows the basic flow. Your actual scripts will be more detailed, including error handling and more specific assertions. The process of writing the scripts involves using the tool's API to interact with the application and verify its behavior.

Test Execution

After writing your test scripts, you'll run them. Most testing tools allow you to execute tests individually or in batches. When a test runs, the tool will:

  1. Open the application and perform the actions defined in your script.
  2. Check the assertions. If an assertion fails, the test will be marked as failed. Otherwise, it will pass.
  3. Generate a report showing which tests passed and which failed, along with any error messages or screenshots.

Test Reporting and Analysis

It's important to analyze the results of your tests. You'll want to see which tests passed, which failed, and why. Test reports are crucial for this. They provide detailed information about each test run, including:

  • Test name and description
  • Pass/fail status
  • Error messages and screenshots (if applicable)
  • Execution time

By analyzing the reports, you can identify bugs, pinpoint areas of the application that need improvement, and assess the overall quality of your application. Make sure that the reports are easily accessible and understandable by everyone on your team. This promotes collaboration and helps ensure that everyone is informed about the status of the application.

Best Practices for Functional GUI Tests

Here are some best practices to keep in mind when creating and running functional GUI tests:

  • Keep tests focused: Each test should verify a single, specific functionality. This makes it easier to identify and fix issues.
  • Write clear and concise test descriptions: Make sure your test descriptions clearly explain what the test is intended to do.
  • Use meaningful element locators: Instead of using hard-coded locators like XPath expressions, try to use attributes or IDs to find elements. This makes your tests more robust.
  • Make tests reusable: Write your tests in a way that you can reuse them across different environments or test suites. This saves time and effort.
  • Automate as much as possible: Automate your tests to save time and reduce the risk of human error.
  • Regularly review and maintain tests: As your application changes, you'll need to update your tests to reflect those changes. Review your tests regularly to ensure they are still valid and working correctly. Test automation is not a set-it-and-forget-it process. It requires continuous maintenance and monitoring.
  • Integrate with CI/CD pipelines: Integrate your tests into your continuous integration and continuous delivery (CI/CD) pipelines so that tests run automatically whenever code changes are made. This helps you catch bugs early in the development cycle. If you integrate tests into your pipeline, you can get quick feedback on the health of your application.

Conclusion

So, guys, functional GUI tests are an essential part of software development, and can ensure that your application runs smoothly. We covered the basics from understanding requirements and creating scenarios to writing and executing test scripts. By following the best practices, you can create robust and reliable tests that will help you deliver high-quality software. Remember to choose the right tools, write clear tests, and analyze your results carefully. Keep practicing and you'll become a pro in no time! Hope this helps, happy testing!