{"id":79183,"date":"2025-04-28T18:10:26","date_gmt":"2025-04-28T12:40:26","guid":{"rendered":"https:\/\/www.guvi.in\/blog\/?p=79183"},"modified":"2025-09-03T15:56:37","modified_gmt":"2025-09-03T10:26:37","slug":"web-form-automation-with-playwright-framework","status":"publish","type":"post","link":"https:\/\/www.guvi.in\/blog\/web-form-automation-with-playwright-framework\/","title":{"rendered":"Mastering Web Form Automation with Playwright Framework"},"content":{"rendered":"\n<p>In today&#8217;s digital landscape, automated testing plays a crucial role in ensuring web applications function seamlessly across different browsers. One of the most efficient automation tools available is <strong>Playwright<\/strong>, a powerful framework designed for end-to-end testing.<\/p>\n\n\n\n<p>This guide will walk you through <strong>setting up Playwright, structuring test cases, and executing automation scripts<\/strong> to interact with input elements on a web page using Python Playwright.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is a playwright?<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/playwright.dev\/python\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Playwright<\/a> is an open-source automation <a href=\"https:\/\/www.guvi.in\/blog\/what-is-a-framework\/\" target=\"_blank\" rel=\"noreferrer noopener\">framework<\/a> developed by <strong>Microsoft<\/strong> that supports testing across multiple browsers (<strong>Chromium, Firefox, WebKit<\/strong>). It is known for:<\/p>\n\n\n\n<ul>\n<li><strong>Cross-browser testing<\/strong><\/li>\n\n\n\n<li><strong>Headless and headed execution<\/strong><\/li>\n\n\n\n<li><strong>Auto-wait mechanism<\/strong> to handle dynamic content<\/li>\n\n\n\n<li><strong>Powerful selectors<\/strong> for better element handling<\/li>\n<\/ul>\n\n\n\n<p>Playwright is widely used for web testing due to its <strong>fast execution, parallel test capabilities, and support for modern web applications<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Steps to Web Form Automation with Playwright<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"630\" src=\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/04\/Steps-to-Web-Form-Automation-with-Playwright@2x-1200x630.png\" alt=\"Steps to Web Form Automation with Playwright\" class=\"wp-image-79445\" srcset=\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/04\/Steps-to-Web-Form-Automation-with-Playwright@2x-1200x630.png 1200w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/04\/Steps-to-Web-Form-Automation-with-Playwright@2x-300x158.png 300w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/04\/Steps-to-Web-Form-Automation-with-Playwright@2x-768x403.png 768w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/04\/Steps-to-Web-Form-Automation-with-Playwright@2x-1536x806.png 1536w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/04\/Steps-to-Web-Form-Automation-with-Playwright@2x-2048x1075.png 2048w, https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/04\/Steps-to-Web-Form-Automation-with-Playwright@2x-150x79.png 150w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">1. Setting Up the Environment<\/h3>\n\n\n\n<p>To start automating input elements with Playwright, follow these setup steps:<\/p>\n\n\n\n<p><strong>Step 1:<\/strong> Install Playwright<\/p>\n\n\n\n<p>First, install Playwright and its dependencies using pip:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>pip install playwright<\/strong><\/code><\/pre>\n\n\n\n<p>Then, install the necessary browsers:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>playwright install<\/strong><\/code><\/pre>\n\n\n\n<p><strong>Step 2:<\/strong> Install pytest (Optional for Test Case Management)<\/p>\n\n\n\n<p>If you plan to use <strong><code>pytest<\/code><\/strong> for running structured test cases, install it as well:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>pip install pytest<\/strong><\/code><\/pre>\n\n\n\n<p><em>Are you interested in starting a <a href=\"https:\/\/www.guvi.in\/blog\/important-python-backend-technologies\/\" target=\"_blank\" rel=\"noreferrer noopener\">career in Python<\/a>? Kickstart your Python journey using Guvi\u2019s FREE E-book on <a href=\"https:\/\/www.guvi.in\/mlp\/python-ebook?utm_source=blog&amp;utm_medium=hyperlink&amp;utm_campaign=Mastering+Web+Form+Automation+with+Playwright\" data-type=\"link\" data-id=\"https:\/\/www.guvi.in\/mlp\/python-ebook?utm_source=blog&amp;utm_medium=hyperlink&amp;utm_campaign=Mastering+Web+Form+Automation+with+Playwright\" target=\"_blank\" rel=\"noreferrer noopener\">Python: A Beginner\u2019s Guide to Coding and Beyond<\/a>. It covers all the necessary concepts you need to know, <\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Project Structure<\/h3>\n\n\n\n<p>A well-organized project ensures <strong>scalability and maintainability<\/strong>. Here\u2019s an ideal structure for a Playwright test suite:<\/p>\n\n\n\n<p>playwright-tests\/<\/p>\n\n\n\n<p>\u2502\u2500\u2500 tests\/<\/p>\n\n\n\n<p>\u2502 &nbsp; \u251c\u2500\u2500 test_form.py &nbsp; # Test cases for form interactions<\/p>\n\n\n\n<p>\u2502\u2500\u2500 utils\/<\/p>\n\n\n\n<p>\u2502 &nbsp; \u251c\u2500\u2500 browser_setup.py&nbsp; # Playwright setup &amp; teardown functions<\/p>\n\n\n\n<p>\u2502\u2500\u2500 reports\/&nbsp; # Stores test execution reports<\/p>\n\n\n\n<p>\u2502\u2500\u2500 pytest.ini&nbsp; # Configuration for pytest (if needed)<\/p>\n\n\n\n<p>\u2502\u2500\u2500 requirements.txt&nbsp; # Dependencies list<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Automating Input Elements in Playwright<\/h3>\n\n\n\n<p>Let\u2019s consider a sample <a href=\"https:\/\/www.guvi.in\/blog\/how-to-make-a-basic-html-form-in-flask\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>HTML form<\/strong><\/a> hosted at:<br>\ud83d\udd17<a href=\"https:\/\/suman-dynamic-html-form.netlify.app\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"> <strong>https:\/\/suman-dynamic-html-form<\/strong><\/a><strong><a href=\"https:\/\/suman-dynamic-html-form.netlify.app\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">.<\/a><\/strong><a href=\"https:\/\/suman-dynamic-html-form.netlify.app\/\" target=\"_blank\" rel=\"noopener\"><strong>netlify.app\/<\/strong><\/a><\/p>\n\n\n\n<p>The automation script will perform the following actions:<\/p>\n\n\n\n<ul>\n<li><strong>Launch a browser<\/strong><\/li>\n\n\n\n<li><strong>Fill in personal details<\/strong><\/li>\n\n\n\n<li><strong>Select radio buttons and dropdowns<\/strong><\/li>\n\n\n\n<li><strong>Click submit and handle alerts<\/strong><\/li>\n\n\n\n<li><strong>Close the browser<\/strong><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. Full Playwright Script for Form Automation<\/h3>\n\n\n\n<p>Create a file <code>test_form.py<\/code> inside the <code>tests\/ directory<\/code> and add the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>from playwright.sync_api import sync_playwright\nfrom time import sleep\n\n# Define test data\nURL = \"https:\/\/suman-dynamic-html-form.netlify.app\/\"\nFIRST_NAME = \"John\"\nLAST_NAME = \"Steward\"\nADDRESS = \"Bangalore\"\nPINCODE = \"99501\"\n\n# Function to automate form filling\ndef test_fill_form():\n    with sync_playwright() as p:\n        # Launch the browser\n        browser = p.chromium.launch(headless=False)  # Set headless=True for faster execution\n        context = browser.new_context()\n        page = context.new_page()\n\n        # Open the webpage\n        page.goto(URL)\n        page.set_viewport_size({\"width\": 1280, \"height\": 720})\n\n        # Fill input fields\n        page.fill(\"input#fname\", FIRST_NAME)\n        page.fill(\"input#lname\", LAST_NAME)\n        page.fill(\"input#address\", ADDRESS)\n        page.fill(\"input#pin\", PINCODE)\n\n        # Select radio button\n        page.check(\"input&#91;value='Male']\")  \n\n        # Select multiple items from dropdown\n        page.select_option(\"#food\", &#91;\"Pizza\", \"Pasta\"])\n\n        # Select State and Country\n        page.select_option(\"#state\", \"Karnataka\")\n        page.select_option(\"#country\", \"India\")\n\n        # Click Submit Button\n        page.click(\"button:text('Submit')\")\n\n        # Handle alert\n        page.on(\"dialog\", lambda dialog: dialog.accept())\n\n        # Wait for 5 seconds to observe results\n        sleep(5)\n\n         # Print success message in console\n         print(\"SUCCESS, HTML Form Filled !\")\n\n         # Close the browser\n         browser.close()\n<\/code><\/pre>\n\n\n\n<p><strong>Breakdown of the Playwright Script<\/strong><\/p>\n\n\n\n<ol>\n<li><strong>Launching the Browser<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>browser = p.chromium.launch(headless=False)&nbsp;&nbsp;\n\ncontext = browser.new_context()\n\npage = context.new_page()<\/code><\/pre>\n\n\n\n<ul>\n<li>headless=False allows you to see the automation in action.<br><\/li>\n\n\n\n<li><strong>Contexts<\/strong> are used to isolate browser sessions.<br><\/li>\n<\/ul>\n\n\n\n<ol start=\"2\">\n<li><strong>Navigating to the Web Page<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>page.goto(URL)\n\npage.set_viewport_size({\"width\": 1280, \"height\": 720})<\/code><\/pre>\n\n\n\n<ul>\n<li>goto() navigates to the test website.<br><\/li>\n\n\n\n<li>set_viewport_size() sets the browser window size.<br><\/li>\n<\/ul>\n\n\n\n<ol start=\"3\">\n<li><strong>Filling Input Fields<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>page.fill(\"input#fname\", FIRST_NAME)\n\npage.fill(\"input#lname\", LAST_NAME)\n\npage.fill(\"input#address\", ADDRESS)\n\npage.fill(\"input#pin\", PINCODE)<\/code><\/pre>\n\n\n\n<ul>\n<li>The fill() method enters text into input fields using <strong><a href=\"https:\/\/www.guvi.in\/blog\/guide-for-css-selectors\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS selectors<\/a><\/strong>.<br><\/li>\n<\/ul>\n\n\n\n<ol start=\"4\">\n<li><strong>Selecting Radio Buttons &amp; Dropdowns<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>page.check(\"input&#91;value='Male']\")\n\npage.select_option(\"#food\", &#91;\"Pizza\", \"Pasta\"])\n\npage.select_option(\"#state\", \"Karnataka\")\n\npage.select_option(\"#country\", \"India\")<\/code><\/pre>\n\n\n\n<ul>\n<li>check() is used for selecting <strong>radio buttons and checkboxes<\/strong>.<br><\/li>\n\n\n\n<li>select_option() is used for <strong>dropdown selections<\/strong>.<br><\/li>\n<\/ul>\n\n\n\n<ol start=\"5\">\n<li><strong>Clicking the Submit Button &amp; Handling Alerts<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>page.click(\"button:text('Submit')\")\n\npage.on(\"dialog\", lambda dialog: dialog.accept())<\/code><\/pre>\n\n\n\n<ul>\n<li>click() is used to submit the form.<br><\/li>\n\n\n\n<li>on(&#8220;dialog&#8221;) listens for alerts and <strong>automatically accepts them<\/strong>.<br><\/li>\n<\/ul>\n\n\n\n<ol start=\"6\">\n<li><strong>Closing the Browser<\/strong><\/li>\n<\/ol>\n\n\n\n<p><code>browser.close()<\/code> &#8211; Ensures that the browser closes after execution.<\/p>\n\n\n\n<p>Are you curious to learn more about automation? Enroll in Guvi&#8217;s wonderful course on <a href=\"https:\/\/www.guvi.in\/courses\/software-testing-and-automation\/selenium-automation-with-python\/?utm_source=blog&amp;utm_medium=hyperlink&amp;utm_campaign=Mastering+Web+Form+Automation+with+Playwright\" target=\"_blank\" rel=\"noreferrer noopener\">Selenium Automation with Python<\/a>. This course covers everything you need to know about Selenium automation using Python from beginner to advanced level. You can gain hands-on experience with the guided projects along with an industry-recognized certification.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5.&nbsp; Running the Playwright Script<\/strong><\/h3>\n\n\n\n<p>Execute the script using:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>pytest tests\/test_form.py<\/strong><\/code><\/pre>\n\n\n\n<p>This will launch a browser, fill the form, submit it, handle alerts, and close the browser.<\/p>\n\n\n\n<p><strong>To run tests in headless mode (without opening the browser):<br><\/strong>Modify:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>browser = p.chromium.launch(headless=True)<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>This guide provided a structured approach to <strong>automating web forms using Python Playwright<\/strong>. We covered:<br>&nbsp;<\/p>\n\n\n\n<ul>\n<li>Setting up Playwright<\/li>\n\n\n\n<li>Writing a test script to interact with input elements<\/li>\n\n\n\n<li>Handling radio buttons, dropdowns, and alerts<\/li>\n\n\n\n<li>Running and optimizing tests<\/li>\n<\/ul>\n\n\n\n<p>By leveraging <strong>Playwright&#8217;s robust API and auto-wait mechanisms<\/strong>, web automation becomes more reliable and efficient. Start integrating Playwright into your testing workflow and streamline web automation effortlessly!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In today&#8217;s digital landscape, automated testing plays a crucial role in ensuring web applications function seamlessly across different browsers. One of the most efficient automation tools available is Playwright, a powerful framework designed for end-to-end testing. This guide will walk you through setting up Playwright, structuring test cases, and executing automation scripts to interact with [&hellip;]<\/p>\n","protected":false},"author":48,"featured_media":79446,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[706],"tags":[],"views":"3958","authorinfo":{"name":"Basil Ahamed","url":"https:\/\/www.guvi.in\/blog\/author\/basil-ahamed-s\/"},"thumbnailURL":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/04\/Mastering-Web-Form-Automation-300x116.png","jetpack_featured_media_url":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2025\/04\/Mastering-Web-Form-Automation.png","_links":{"self":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/79183"}],"collection":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/users\/48"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/comments?post=79183"}],"version-history":[{"count":9,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/79183\/revisions"}],"predecessor-version":[{"id":86288,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/79183\/revisions\/86288"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media\/79446"}],"wp:attachment":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media?parent=79183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/categories?post=79183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/tags?post=79183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}