Automating the DemoQA Practice Form Using Playwright with JavaScript

UI automation is an essential part of modern software testing. In this project, I automated the DemoQA Practice Form using Playwright with JavaScript to demonstrate end-to-end web application testing.

Technologies Used

• Playwright

• JavaScript

• Node.js

• Visual Studio Code

• Git & GitHub

Project Overview

The automation script performs the following tasks:

• Opens the DemoQA website.

• Navigates to the Practice Form.

• Fills in personal details such as name, email, gender, and mobile number.

• Selects the date of birth using the React DatePicker.

• Chooses a subject from the auto-suggestion list.

• Selects hobbies.

• Uploads an image.

• Enters the current address.

• Selects the state and city from dynamic dropdowns.

• Submits the form.

• Verifies the successful submission modal.

• Closes the modal and performs a final validation.

Key Playwright Features Demonstrated

• Role-based and CSS locators

• Explicit assertions using expect

• Handling dynamic React components

• File upload with setInputFiles()

• Waiting for elements before validation

• End-to-end UI workflow automation

Challenges Faced

One small challenge was that a fixed advertisement overlapped part of the page after submission. The script removes the ad before closing the confirmation modal, allowing the automation to continue without interruption.

What I Learned

This project improved my understanding of:

• Building reliable UI automation tests

• Working with dynamic web elements

• Automating React-based forms

• Writing clean and maintainable Playwright scripts

• Validating application behavior using assertions

Source Code

You can find the complete source code on my GitHub repository:
https://github.com/contact-sulav

Conclusion

Playwright provides a fast and reliable way to automate modern web applications. This DemoQA Practice Form project demonstrates practical techniques such as handling dynamic elements, file uploads, assertions, and complete form validation, making it a great exercise for anyone learning UI automation testing.

Thank you for reading! Feel free to share your feedback or suggestions in the comments.