Guided: Playwright Foundations with Python

Playwright Foundations with Python - Page Setup

Welcome to the Playwright Testing Lab! In this lab, you'll learn how to write end-to-end tests using Playwright with Python. The lab guides you through creating automated tests for a registration feature on an e-commerce website. By the end of this lab, you will have gained a solid understanding of how to structure, write, and verify tests using Playwright.

Project Structure Overview

• workspace/: The root directory for the entire project, containing all the necessary files and directories for the lab.

  • .pytest_cache/: Stores caching information used by pytest to optimize test runs. This directory is managed by pytest and generally doesn't need modification.

  • pytest.ini: A configuration file for pytest, including settings for test discovery patterns, markers, and other configurations.

  • step_01/ to step_06/: These directories correspond to the individual steps of the lab, each focusing on a specific aspect of test writing.

    • registration_page.py: This file contains the setup for the registration page, including HTML content, JavaScript validation, and necessary fixtures. It is pre-configured and should not be modified by lab participants.

    • verify_test_step_X.py: Used to verify your implementation in each step. Running these files will check if your test_step_X.py files are correctly implemented.

    • test_step_X.py: The file you will be working on for each step. Follow the instructions and complete the TODOs to implement the tests as described.

  • solutions/: Contains the solution files for each step. These can be referred to if you get stuck or after you've completed the lab to compare your implementation.

    • registration.html: The HTML file representing the registration form. To view it, open the registration.html file in the web browser tab.

Method Design

In this step, you will be working on setting up the page environment to ensure that the viewport size matches the required dimensions for the tests.

• Set the Viewport Size: Use the page.set_viewport_size() method to set the viewport size to 1280x720 pixels. This step ensures a consistent testing environment for the registration form.

• Verify the Viewport Size: Write an assertion to confirm that the viewport size has been correctly set. Ensure that your assertion checks that the width is 1280 pixels and the height is 720 pixels.

• Remove the pass Statement: Replace the pass statement with your implementation, completing this initial setup task. After implementing the code for Step 1, you can verify your work by running the provided verification script. This script will check whether you have correctly set the viewport size and verified it in your test.

To run the verification script, use the following command:

python3 step_01/verify_test_step_01.py

Step 2: Setting Up the Registration Page

Here you will extend the functionality of the browser fixture to include the setup for a registration page. This step involves creating a simple HTML form that mimics a registration page for an e-commerce website. You will then write tests to ensure that the page is set up correctly and can be accessed by Playwright.

Method Design

In this step, you will be working on setting up and verifying the registration page using Playwright.

• Load the Registration Page: Use the setup_registration_page fixture to load the registration page. This fixture is pre-configured to serve the HTML content of the registration form.

• Verify the Page Title: Write an assertion to check that the page title includes the text "ABC Mobile E-commerce". This ensures that the correct page is loaded.

• Optional Additional Verifications: You can add extra assertions to check for the presence of specific elements on the page, such as form fields or buttons, to further verify the page setup.

• Remove the pass Statement: Replace the pass statement with your implementation, completing the task of setting up and verifying the registration page. Now that you've extended the browser fixture and created a test for the registration page, it's time to confirm your implementation. Use the provided verification script to ensure you've correctly loaded the page, checked the title, and potentially added other relevant assertions.

To validate your work, execute the following command in your terminal:

python3 step_02/verify_test_step_02.py

Step 3: Filling Out the Registration Form

In Step 3, you will extend your Playwright test to fill out the registration form fields with test data. This task involves using Playwright's form-filling capabilities to populate the fields on a registration page and then verifying that the fields have been filled out correctly.

Method Design

• Load the Registration Form: Use the setup_registration_page fixture to load the registration form. This fixture sets up the HTML content of the registration page, allowing you to interact with the form elements.

• Fill Out the Form Fields: Use the page.fill() method to populate the Last Name, Cell Phone Number, UserId, and Password fields with the provided test data. This method simulates a user filling out the form.

• Verify the Form Fields: After populating the fields, write assertions to verify that they contain the expected values. Use the page.input_value() method to retrieve the values of each field and compare them against the test data to ensure correctness.

• Remove the pass Statement: Replace the pass statement with your implementation to complete the test, ensuring that the form is correctly populated and that the values are accurately verified. Now that you've extended your Playwright test to fill out the registration form, it's time to confirm your implementation. You'll use a verification script to ensure you've correctly populated the form fields with test data and verified their values.

To validate your work on form filling and field verification, run the following command in your terminal:

python3 step_03/verify_test_step_03.py

Step 4: Submitting the Registration Form

In this step, you will extend your Playwright test to simulate submitting the registration form and verifying that the submission is handled correctly. This step involves clicking the submit button on the registration form and checking that the expected success message is displayed.

Method Design

• Load the Registration Form: Use the setup_registration_page fixture to load the registration form. This fixture sets up the HTML content needed for interacting with the form.

• Fill Out the Form with Valid Data: Populate the Last Name, Cell Phone Number, UserId, and Password fields with the provided test data using the page.fill() method. This ensures that the form is correctly filled before submission.

• Submit the Form: Use the page.click() method to simulate clicking the submit button on the form. This action triggers the form submission.

• Verify the Success Message: After submitting the form, write an assertion to check that the success message is displayed. This ensures that the form submission is processed correctly.

• Test Error Handling:

  • Test the form with an empty UserId and verify that the appropriate error message is displayed.
  • Test the form with a weak password and verify the corresponding error message.
  • Test the form with invalid customer data (non-existing ABC-Mobile customer) and verify the error message. This step ensures that your form handles errors appropriately.

• Remove the pass Statement: Replace the pass statement with your implementation, completing the task of testing form submission and error handling. Having extended your Playwright test to simulate form submission and error scenarios, it's time to confirm your implementation. This verification script will check if you've correctly simulated form submission, verified the success message, and properly handled various error conditions.

To evaluate your work on form submission and error handling, execute this command in your terminal:

python3 step_04/verify_test_step_04.py

Step 5: Verifying Form Field Values After Submission

Now you will extend your Playwright test to verify that the input fields in the registration form retain the correct values after the form is submitted. This step involves ensuring that the data entered into the form fields is preserved correctly through the form submission process.

Method Design

• Load the Registration Form: Use the setup_registration_page fixture to load the registration form. This fixture initializes the HTML content, enabling you to interact with the form elements.

• Fill Out and Submit the Form: Populate the Last Name, Cell Phone Number, UserId, and Password fields with the provided test data. After filling out the form, use the page.click() method to submit the form.

• Verify Form Field Values: After submission, write assertions to verify that the form fields retain the correct values. Use Playwright's page.input_value() method to accurately check the contents of each input field and ensure that the data is preserved as expected.

• Remove the pass Statement: Replace the pass statement with your implementation, completing the task of verifying that the form handles and retains input data correctly after submission. You've now enhanced your Playwright test to check if form field values are retained post-submission. The provided verification script will assess whether you've correctly filled out the form, simulated its submission, and accurately verified that each field maintains its entered data.

To evaluate your work on post-submission data verification, run this command in your terminal:

python3 step_05/verify_test_step_05.py

Step 6: Final Integration and Verification

For this last step, you will bring together everything you've learned so far to perform a comprehensive integration test. This test will cover the entire workflow of filling out a registration form, submitting it, and verifying that both the submission was successful and that the form fields contain the correct data after submission.

Method Design

• Load the Registration Form: Use the setup_registration_page fixture to load the registration form. This sets up the necessary environment for you to interact with the form.

• Test the Full Registration Process: Populate the form fields with valid data using the page.fill() method and then submit the form with page.click(). Write assertions to verify that the success message is displayed, confirming that the submission was successful.

• Test Various Edge Cases:

  • Empty UserId: Test the form with an empty UserId field and verify that the appropriate error message is displayed.
  • Weak Password: Submit the form with a weak password and check for the corresponding error message.
  • Invalid Customer Data: Test with invalid customer data (e.g., non-existing ABC-Mobile customer) and verify the error message.
  • Incorrect Field Formats: Validate the form’s handling of incorrect formats for Last Name and Cell Phone Number.

• Remove the pass Statement: Replace the pass statement with your implementation, completing the task of end-to-end testing and ensuring all components of the registration process work together seamlessly. You've now crafted a complete end-to-end test for the registration process. Let's assess your implementation. This verification script will evaluate your test's ability to simulate the entire registration workflow, including form population, submission, success verification, and handling of various edge cases.

To confirm the robustness of your integrated test suite, execute this command in your terminal:

python3 step_06/verify_test_step_06.py

Congratulations on Successfully Completing the Playwright Foundations with Python Lab!

You've made impressive progress in mastering end-to-end testing using Playwright and Python. Throughout this lab, you've developed a comprehensive suite of tests to ensure the reliability and accuracy of a web application's registration process.

Summary of Your Achievements:

• Playwright Framework: You've built a strong foundation in using Playwright, leveraging its powerful API to interact with web pages, simulate user actions, and verify application behavior.
• Form Interaction: By automating form submissions and verifying inputs, you've gained hands-on experience in simulating user interactions in a web environment.
• Assertions and Validation: You learned to write effective assertions to validate that web elements and page states match your expectations, ensuring robust and reliable tests.
• Handling Edge Cases: You've tackled various edge cases, such as empty fields, weak passwords, and invalid user data, ensuring that the application gracefully handles all scenarios.

Interacting with Your Application:

Here are some examples of the tests you've created and what they validate:

• Filling and Submitting the Form: Tests that the registration form can be filled out and submitted successfully, with appropriate success messages displayed.
• Error Handling: Tests for ensuring that the application correctly handles errors, such as missing or invalid input, and displays the right error messages.
• Data Verification: Tests that verify the data entered into the form is correctly handled and retained after submission.

Further Development:

While you've built a solid foundation with your Playwright tests, there's always more to explore. Consider expanding your test coverage to include other parts of your application, such as login processes, navigation flows, or more complex user interactions. You might also explore integrating your tests into a CI/CD pipeline for automated testing as part of your development workflow.

Further Learning Resources:

To continue enhancing your skills in Playwright, Python, and automated testing, Pluralsight offers a wide range of courses that cover these topics and more. Dive deeper into test automation strategies, advanced Playwright features, and modern web development practices to build even more comprehensive and scalable testing solutions.