{"id":714,"date":"2026-05-29T09:53:34","date_gmt":"2026-05-29T09:53:34","guid":{"rendered":"https:\/\/logicnextgen.com\/tutorials\/?page_id=714"},"modified":"2026-07-30T06:30:56","modified_gmt":"2026-07-30T06:30:56","slug":"playwright-tutorial","status":"publish","type":"page","link":"https:\/\/logicnextgen.com\/tutorials\/playwright-tutorial\/","title":{"rendered":"Playwright Tutorial"},"content":{"rendered":"\n<p class=\"has-text-color has-link-color has-large-font-size wp-elements-57e9bb34729a845f86aeccf0eca05b8e wp-block-paragraph\" style=\"color:#ff8d00\"><strong>Playwright Tutorial<\/strong><\/p>\n\n\n\n<p class=\"has-text-color has-link-color wp-elements-a98e100029e144f6833f72188a537146 wp-block-paragraph\" style=\"color:#ff8d00\"><strong>Best Free Playwright<\/strong> <strong>Training Tutorial | Beginner To Advanced Level<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-contrast-color has-text-color has-link-color wp-elements-039575a5c12d51dc97b3fa8e4f31191b\"><strong><strong><a href=\"#What-is-Playwright\" data-type=\"internal\" data-id=\"#What-is-Playwright\">What is Playwright<\/a><\/strong><\/strong><\/li>\n\n\n\n<li class=\"has-contrast-color has-text-color has-link-color wp-elements-93c233ff108f8293059994fbdb1da0f0\"><strong><a href=\"#Why-is-Playwright-popular\" data-type=\"internal\" data-id=\"#Why-is-Playwright-popular\">Why is Playwright popular<\/a><\/strong><\/li>\n\n\n\n<li class=\"has-contrast-color has-text-color has-link-color wp-elements-528753034c7912967b057561a0e4408d\"><strong><strong><a href=\"#Advantages-of-Playwright\" data-type=\"internal\" data-id=\"#Advantages-of-Playwright\">Advantages of Playwright<\/a><\/strong><\/strong><\/li>\n\n\n\n<li class=\"has-contrast-color has-text-color has-link-color wp-elements-29b598b992a256c92b6ac50824d56136\"><strong><strong><strong><strong><a href=\"#How-to-launch-a-browser-in-Playwright\" data-type=\"internal\" data-id=\"#How-to-launch-a-browser-in-Playwright\">How to launch a browser in Playwright<\/a><\/strong><\/strong><\/strong><\/strong><\/li>\n\n\n\n<li class=\"has-contrast-color has-text-color has-link-color wp-elements-520c9173f1aefdd7c8d8aed6eb434269\"><strong><a href=\"#How-to-handle-Text-Box-in-Playwright\" data-type=\"internal\" data-id=\"#How-to-handle-Text-Box-in-Playwright\">How to handle a text box in Playwright<\/a><\/strong><\/li>\n\n\n\n<li class=\"has-contrast-color has-text-color has-link-color wp-elements-3062febef4b732fdea2d171f7b4d11f4\"><strong><a href=\"#How-to-handle-Radio-Buttons-and-Checkboxes-in-Playwright\">How to handle Radio Buttons in Playwright<\/a><\/strong><\/li>\n\n\n\n<li class=\"has-contrast-color has-text-color has-link-color wp-elements-3168ede084c82c5bb1bc888e904687fc\"><strong><a href=\"#How-to-handle-a-checkbox-in-Playwright\" data-type=\"internal\" data-id=\"#How-to-handle-a-checkbox-in-Playwright\">How to handle Checkboxes in Playwright<\/a><\/strong><\/li>\n\n\n\n<li class=\"has-contrast-color has-text-color has-link-color wp-elements-3191c154de83a999263241b3b2560432\"><strong><a href=\"#How-to-handle-a-dropdown-in-Playwright\" data-type=\"internal\" data-id=\"#How-to-handle-a-dropdown-in-Playwright\">How to handle a dropdown in Playwright<\/a><\/strong><\/li>\n\n\n\n<li class=\"has-contrast-color has-text-color has-link-color wp-elements-1b317ffa7e1f24909b3ab88c434d3932\"><strong><a href=\"#How-to-Click-a-Button,-Double-Click,-and-Right-Click-in-Playwright\" data-type=\"internal\" data-id=\"#How-to-Click-a-Button,-Double-Click,-and-Right-Click-in-Playwright\"><strong>How to<\/strong> <strong>Click a <strong>Button<\/strong>, Double-Click, and Right-Click<\/strong> <strong>in Playwright<\/strong><\/a><\/strong><\/li>\n\n\n\n<li class=\"has-contrast-color has-text-color has-link-color wp-elements-d8636da69265c0af506c8b605c2a30c8\"><strong><a href=\"#How-to-handle-a-checkbox-in-Playwright\" data-type=\"internal\" data-id=\"#How-to-handle-a-checkbox-in-Playwright\"><strong>How To Perform Mouse Hover In Playwright<\/strong><\/a><\/strong><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 id=\"Why-is-Playwright-popular\" class=\"wp-block-heading has-large-font-size\"><strong>What is Playwright<\/strong><\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright is a modern automation testing framework developed by Microsoft. It is used to automate and test modern web applications across multiple browsers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright allows testers and developers to perform cross-browser testing using a single API.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 id=\"Why-is-Playwright-popular\" class=\"wp-block-heading has-large-font-size\"><strong>Why is Playwright popular<\/strong><\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright has become popular because of its modern features and reliable execution.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>1. Cross-Browser Testing<\/strong><\/h6>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright supports multiple browsers with the same test script.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>2. Fast Execution<\/strong><\/h6>\n\n\n\n<p class=\"wp-block-paragraph\">Tests execute quickly compared to many traditional automation tools.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>3. Parallel Execution<\/strong><\/h6>\n\n\n\n<p class=\"wp-block-paragraph\">Multiple test cases can run simultaneously, reducing execution time.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>4. Auto-Wait Mechanism<\/strong><\/h6>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright automatically waits for elements before performing actions.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>5. Headless Execution<\/strong><\/h6>\n\n\n\n<p class=\"wp-block-paragraph\">Tests can run without opening the browser UI, improving performance.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>6. Multiple Language Support<\/strong><\/h6>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright supports:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>JavaScript<\/li>\n\n\n\n<li>TypeScript<\/li>\n\n\n\n<li>Java<\/li>\n\n\n\n<li>Python<\/li>\n\n\n\n<li>C#<\/li>\n<\/ul>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>7. Reliable Testing<\/strong><\/h6>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"Advantages-of-Playwright\">Playwright provides stable and consistent test execution for modern applications.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<!--more-->\n\n\n\n<h1 id=\"Advantages-of-Playwright\" class=\"wp-block-heading has-large-font-size\"><strong>Advantages of Playwright<\/strong><\/h1>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Easy to learn<\/li>\n\n\n\n<li>Faster execution<\/li>\n\n\n\n<li>Better handling of dynamic elements<\/li>\n\n\n\n<li>Supports modern web applications<\/li>\n\n\n\n<li>Built-in reporting and debugging features<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"has-contrast-color has-text-color has-link-color has-large-font-size wp-elements-36590b7e3893211a5a452b281e19e73e wp-block-paragraph\" id=\"How-to-launch-a-browser-in-Playwright\"><strong>How to launch a browser in Playwright<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>import { test, expect } from '@playwright\/test';\n\ntest('My Test case 1', async ({ page }) => {\n\n    await page.goto(\"https:\/\/logicnextgen.com\/projects\/logiccart\/upload\/\");\n    \n     await page.waitForTimeout(20000);\n\n    \n\n});\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FF79C6\">import<\/span><span style=\"color: #F8F8F2\"> { test, expect } <\/span><span style=\"color: #FF79C6\">from<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">@playwright\/test<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #50FA7B\">test<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">My Test case 1<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FF79C6\">async<\/span><span style=\"color: #F8F8F2\"> ({ <\/span><span style=\"color: #FFB86C; font-style: italic\">page<\/span><span style=\"color: #F8F8F2\"> }) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">goto<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">https:\/\/logicnextgen.com\/projects\/logiccart\/upload\/<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">     <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">waitForTimeout<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9\">20000<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"has-contrast-color has-text-color has-link-color has-large-font-size wp-elements-079d9b8579ccd24e4637db6a4594302f wp-block-paragraph\" id=\"How-to-handle-Text-Box-in-Playwright\"><strong>How to handle Text Box in Playwright<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"353\" src=\"https:\/\/logicnextgen.com\/tutorials\/wp-content\/uploads\/2026\/06\/image-1024x353.png\" alt=\"\" class=\"wp-image-960\" srcset=\"https:\/\/logicnextgen.com\/tutorials\/wp-content\/uploads\/2026\/06\/image-1024x353.png 1024w, https:\/\/logicnextgen.com\/tutorials\/wp-content\/uploads\/2026\/06\/image-300x103.png 300w, https:\/\/logicnextgen.com\/tutorials\/wp-content\/uploads\/2026\/06\/image-768x265.png 768w, https:\/\/logicnextgen.com\/tutorials\/wp-content\/uploads\/2026\/06\/image.png 1282w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Text Box<\/strong> <strong>Practice Link:<\/strong>  <a href=\"https:\/\/logicnextgen.com\/projects\/AutomationTestingPractice\/textbox.php\">https:\/\/logicnextgen.com\/projects\/AutomationTestingPractice\/textbox.php<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>import { test, expect, Locator } from '@playwright\/test';\n\ntest('Text Box', async ({ page }) => {\n\n    \/\/ Open URL\n    await page.goto(\"https:\/\/logicnextgen.com\/projects\/AutomationTestingPractice\/textbox.php\");\n\n    \/\/ Full Name\n    const fullName: Locator = page.locator('#fullname');\n    await fullName.fill('Keshav Kapoor');\n\n    \/\/ Email\n    const email: Locator = page.locator('#email');\n    await email.fill('Keshav@gmail.com');\n\n    \/\/ Current Address\n    const address: Locator = page.locator('#address');\n    await address.fill('Delhi, India');\n\n    \/\/ Password\n    const password: Locator = page.locator('#password');\n    await password.fill('Keshav@123');\n\n    \/\/ Wait\n    await page.waitForTimeout(20000);\n\n});<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FF79C6\">import<\/span><span style=\"color: #F8F8F2\"> { test, expect, Locator } <\/span><span style=\"color: #FF79C6\">from<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">@playwright\/test<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #50FA7B\">test<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Text Box<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FF79C6\">async<\/span><span style=\"color: #F8F8F2\"> ({ <\/span><span style=\"color: #FFB86C; font-style: italic\">page<\/span><span style=\"color: #F8F8F2\"> }) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Open URL<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">goto<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">https:\/\/logicnextgen.com\/projects\/AutomationTestingPractice\/textbox.php<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Full Name<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> fullName<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">Locator<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#fullname<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> fullName.<\/span><span style=\"color: #50FA7B\">fill<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Keshav Kapoor<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Email<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> email<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">Locator<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#email<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> email.<\/span><span style=\"color: #50FA7B\">fill<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Keshav@gmail.com<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Current Address<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> address<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">Locator<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#address<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> address.<\/span><span style=\"color: #50FA7B\">fill<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Delhi, India<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Password<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> password<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">Locator<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#password<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> password.<\/span><span style=\"color: #50FA7B\">fill<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Keshav@123<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Wait<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">waitForTimeout<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9\">20000<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"has-contrast-color has-text-color has-link-color has-large-font-size wp-elements-e427ebc2df3a552e60ef09beb77e28e4 wp-block-paragraph\" id=\"How-to-handle-Radio-Buttons-and-Checkboxes-in-Playwright\"><strong>How to handle Radio Buttons<\/strong> <strong>in Playwright<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"739\" height=\"277\" src=\"https:\/\/logicnextgen.com\/tutorials\/wp-content\/uploads\/2026\/06\/image-2.png\" alt=\"\" class=\"wp-image-970\" srcset=\"https:\/\/logicnextgen.com\/tutorials\/wp-content\/uploads\/2026\/06\/image-2.png 739w, https:\/\/logicnextgen.com\/tutorials\/wp-content\/uploads\/2026\/06\/image-2-300x112.png 300w\" sizes=\"auto, (max-width: 739px) 100vw, 739px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>import { test, expect, Locator } from '@playwright\/test';\n\ntest('Radio Button', async ({ page }) => {\n\n    \/\/ Open URL\n    await page.goto(\"https:\/\/logicnextgen.com\/projects\/AutomationTestingPractice\/Radiobutton.php\");\n\n    \/\/ Select Male radio button\n    const male: Locator = page.locator('#male');\n    await male.check();\n\n    \/\/ Wait for 5 seconds\n    await page.waitForTimeout(5000);\n\n    \/\/ Select Female radio button\n    const female: Locator = page.locator('#female');\n    await female.check();\n\n    \/\/ Wait for 20 seconds\n    await page.waitForTimeout(20000);\n\n});\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FF79C6\">import<\/span><span style=\"color: #F8F8F2\"> { test, expect, Locator } <\/span><span style=\"color: #FF79C6\">from<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">@playwright\/test<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #50FA7B\">test<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Radio Button<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FF79C6\">async<\/span><span style=\"color: #F8F8F2\"> ({ <\/span><span style=\"color: #FFB86C; font-style: italic\">page<\/span><span style=\"color: #F8F8F2\"> }) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Open URL<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">goto<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">https:\/\/logicnextgen.com\/projects\/AutomationTestingPractice\/Radiobutton.php<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Select Male radio button<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> male<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">Locator<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#male<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> male.<\/span><span style=\"color: #50FA7B\">check<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Wait for 5 seconds<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">waitForTimeout<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9\">5000<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Select Female radio button<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> female<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">Locator<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#female<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> female.<\/span><span style=\"color: #50FA7B\">check<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Wait for 20 seconds<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">waitForTimeout<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9\">20000<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\" id=\"How-to-handle-a-checkbox-in-Playwright\"><strong>How to handle a checkbox in Playwright<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"266\" src=\"https:\/\/logicnextgen.com\/tutorials\/wp-content\/uploads\/2026\/06\/image-1-1024x266.png\" alt=\"\" class=\"wp-image-968\" srcset=\"https:\/\/logicnextgen.com\/tutorials\/wp-content\/uploads\/2026\/06\/image-1-1024x266.png 1024w, https:\/\/logicnextgen.com\/tutorials\/wp-content\/uploads\/2026\/06\/image-1-300x78.png 300w, https:\/\/logicnextgen.com\/tutorials\/wp-content\/uploads\/2026\/06\/image-1-768x199.png 768w, https:\/\/logicnextgen.com\/tutorials\/wp-content\/uploads\/2026\/06\/image-1.png 1114w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>import { test, expect, Locator } from '@playwright\/test';\n\ntest('Check Box', async ({ page }) => {\n\n    \/\/ Open URL\n    await page.goto(\"https:\/\/logicnextgen.com\/projects\/AutomationTestingPractice\/checkbox.php\");\n\n    \/\/ Select Mumbai checkbox\n    const mumbai: Locator = page.locator('#mumbai');\n    await mumbai.check();\n\n    \/\/ Wait\n    await page.waitForTimeout(3000);\n\n    \/\/ Select Delhi checkbox\n    const delhi: Locator = page.locator('#delhi');\n    await delhi.check();\n\n    \/\/ Wait\n    await page.waitForTimeout(3000);\n\n    \/\/ Select Noida checkbox\n    const noida: Locator = page.locator('#noida');\n    await noida.check();\n\n    \/\/ Final Wait\n    await page.waitForTimeout(20000);\n\n});<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FF79C6\">import<\/span><span style=\"color: #F8F8F2\"> { test, expect, Locator } <\/span><span style=\"color: #FF79C6\">from<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">@playwright\/test<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #50FA7B\">test<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Check Box<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FF79C6\">async<\/span><span style=\"color: #F8F8F2\"> ({ <\/span><span style=\"color: #FFB86C; font-style: italic\">page<\/span><span style=\"color: #F8F8F2\"> }) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Open URL<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">goto<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">https:\/\/logicnextgen.com\/projects\/AutomationTestingPractice\/checkbox.php<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Select Mumbai checkbox<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> mumbai<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">Locator<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#mumbai<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> mumbai.<\/span><span style=\"color: #50FA7B\">check<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Wait<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">waitForTimeout<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9\">3000<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Select Delhi checkbox<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> delhi<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">Locator<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#delhi<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> delhi.<\/span><span style=\"color: #50FA7B\">check<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Wait<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">waitForTimeout<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9\">3000<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Select Noida checkbox<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> noida<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">Locator<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#noida<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> noida.<\/span><span style=\"color: #50FA7B\">check<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Final Wait<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">waitForTimeout<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9\">20000<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h1 id=\"How-to-handle-a-dropdown-in-Playwright\" class=\"wp-block-heading has-large-font-size\"><strong>How to handle a dropdown in Playwright<\/strong><\/h1>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>import { test, expect, Locator } from '@playwright\/test';\n\ntest('Dropdown', async ({ page }) => {\n\n\n    await page.goto(\"https:\/\/logicnextgen.com\/projects\/AutomationTestingPractice\/dropdown.php\");\n\n\n    \/\/1) Select State From Dropdown\n    await page.locator('#state').selectOption('Rajasthan');\n\n    \/\/ Wait for 5 seconds\n    await page.waitForTimeout(5000);\n\n\n\n    \/\/2) check number of options in the dropdown(count)\n    const dropdownOptions: Locator = page.locator('#state>option');\n    await expect(dropdownOptions).toHaveCount(4);\n\n\n    \/\/3) check an option present in the dropdown\n    const optionsText: string[] = await dropdownOptions.allTextContents();\n    console.log(optionsText)\n    expect(optionsText).toContain('Delhi'); \/\/ Check if the array contains \"Delhi\"\n\n\n\n    \/\/4) printing options from the drop down\n    for (const option of optionsText) {\n        console.log(option)\n    }\n\n    await page.waitForTimeout(20000);\n\n\n});\n\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FF79C6\">import<\/span><span style=\"color: #F8F8F2\"> { test, expect, Locator } <\/span><span style=\"color: #FF79C6\">from<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">@playwright\/test<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #50FA7B\">test<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Dropdown<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FF79C6\">async<\/span><span style=\"color: #F8F8F2\"> ({ <\/span><span style=\"color: #FFB86C; font-style: italic\">page<\/span><span style=\"color: #F8F8F2\"> }) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">goto<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">https:\/\/logicnextgen.com\/projects\/AutomationTestingPractice\/dropdown.php<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/1) Select State From Dropdown<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#state<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">).<\/span><span style=\"color: #50FA7B\">selectOption<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Rajasthan<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Wait for 5 seconds<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">waitForTimeout<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9\">5000<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/2) check number of options in the dropdown(count)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> dropdownOptions<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">Locator<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#state&gt;option<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">expect<\/span><span style=\"color: #F8F8F2\">(dropdownOptions).<\/span><span style=\"color: #50FA7B\">toHaveCount<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9\">4<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/3) check an option present in the dropdown<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> optionsText<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">string<\/span><span style=\"color: #F8F8F2\">[] <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> dropdownOptions.<\/span><span style=\"color: #50FA7B\">allTextContents<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    console.<\/span><span style=\"color: #50FA7B\">log<\/span><span style=\"color: #F8F8F2\">(optionsText)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #50FA7B\">expect<\/span><span style=\"color: #F8F8F2\">(optionsText).<\/span><span style=\"color: #50FA7B\">toContain<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Delhi<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">); <\/span><span style=\"color: #6272A4\">\/\/ Check if the array contains &quot;Delhi&quot;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/4) printing options from the drop down<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">for<\/span><span style=\"color: #F8F8F2\"> (<\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> option <\/span><span style=\"color: #FF79C6\">of<\/span><span style=\"color: #F8F8F2\"> optionsText) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        console.<\/span><span style=\"color: #50FA7B\">log<\/span><span style=\"color: #F8F8F2\">(option)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">waitForTimeout<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9\">20000<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h1 id=\"How-to-Click-a-Button,-Double-Click,-and-Right-Click-in-Playwright\" class=\"wp-block-heading has-large-font-size\"><strong>How to<\/strong> <strong>Click a <strong>Button<\/strong>, Double-Click, and Right-Click<\/strong> <strong>in Playwright<\/strong><\/h1>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>import { test, expect, Locator } from '@playwright\/test';\nimport { setTimeout } from 'node:timers\/promises';\n\ntest('Buttons Clicks', async ({ page }) => {\n\n    await page.goto(\"https:\/\/logicnextgen.com\/projects\/AutomationTestingPractice\/buttons.php\");\n\n    \/\/Simple Button Click\n    const simpeclcik1 = await page.locator('#singleBtn');\n    simpeclcik1.click();\n\n    \/\/ Wait for 5 seconds\n    await page.waitForTimeout(5000);\n\n\n    \/\/ Double Click\n    const doubleBtn1 = await page.locator('#doubleBtn');\n    doubleBtn1.dblclick();\n\n\n\n    \/\/ Wait for 5 seconds\n    await page.waitForTimeout(5000);\n\n\n    \/\/Right Click\n    const rightBtn1 = await page.locator('#rightBtn');\n    rightBtn1.click({ button: 'right' });\n\n\n    \/\/ Wait for 5 seconds\n    await page.waitForTimeout(5000);\n    \n\n});\n\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FF79C6\">import<\/span><span style=\"color: #F8F8F2\"> { test, expect, Locator } <\/span><span style=\"color: #FF79C6\">from<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">@playwright\/test<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">import<\/span><span style=\"color: #F8F8F2\"> { setTimeout } <\/span><span style=\"color: #FF79C6\">from<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">node:timers\/promises<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #50FA7B\">test<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Buttons Clicks<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FF79C6\">async<\/span><span style=\"color: #F8F8F2\"> ({ <\/span><span style=\"color: #FFB86C; font-style: italic\">page<\/span><span style=\"color: #F8F8F2\"> }) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">goto<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">https:\/\/logicnextgen.com\/projects\/AutomationTestingPractice\/buttons.php<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/Simple Button Click<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> simpeclcik1 <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#singleBtn<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    simpeclcik1.<\/span><span style=\"color: #50FA7B\">click<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Wait for 5 seconds<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">waitForTimeout<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9\">5000<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Double Click<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> doubleBtn1 <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#doubleBtn<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    doubleBtn1.<\/span><span style=\"color: #50FA7B\">dblclick<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Wait for 5 seconds<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">waitForTimeout<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9\">5000<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/Right Click<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> rightBtn1 <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#rightBtn<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    rightBtn1.<\/span><span style=\"color: #50FA7B\">click<\/span><span style=\"color: #F8F8F2\">({ button<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">right<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\"> });<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #6272A4\">\/\/ Wait for 5 seconds<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">waitForTimeout<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9\">5000<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\"><strong><strong>How To Perform Mouse Hover In Playwright<\/strong><\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>import { test, expect, Locator } from '@playwright\/test';\n\ntest('My Title', async ({ page }) => {\n\n\n    await page.goto(\"https:\/\/logicnextgen.com\/projects\/AutomationTestingPractice\/mousehover.php\");\n\n    const pointme = page.locator('#MouserHover1');\n    await pointme.hover();\n    await page.waitForTimeout(20000);\n\n});\n\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FF79C6\">import<\/span><span style=\"color: #F8F8F2\"> { test, expect, Locator } <\/span><span style=\"color: #FF79C6\">from<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">@playwright\/test<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #50FA7B\">test<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">My Title<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FF79C6\">async<\/span><span style=\"color: #F8F8F2\"> ({ <\/span><span style=\"color: #FFB86C; font-style: italic\">page<\/span><span style=\"color: #F8F8F2\"> }) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">goto<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">https:\/\/logicnextgen.com\/projects\/AutomationTestingPractice\/mousehover.php<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> pointme <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#MouserHover1<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> pointme.<\/span><span style=\"color: #50FA7B\">hover<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">waitForTimeout<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9\">20000<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Playwright Tutorial Best Free Playwright Training Tutorial | Beginner To Advanced Level What is Playwright Playwright is a modern automation testing framework developed by Microsoft. It is used to automate and test modern web applications across multiple browsers. Playwright allows testers and developers to perform cross-browser testing using a single API. Why is Playwright popular &#8230; <a title=\"Playwright Tutorial\" class=\"read-more\" href=\"https:\/\/logicnextgen.com\/tutorials\/playwright-tutorial\/\" aria-label=\"Read more about Playwright Tutorial\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-714","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/logicnextgen.com\/tutorials\/wp-json\/wp\/v2\/pages\/714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/logicnextgen.com\/tutorials\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/logicnextgen.com\/tutorials\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/logicnextgen.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/logicnextgen.com\/tutorials\/wp-json\/wp\/v2\/comments?post=714"}],"version-history":[{"count":114,"href":"https:\/\/logicnextgen.com\/tutorials\/wp-json\/wp\/v2\/pages\/714\/revisions"}],"predecessor-version":[{"id":991,"href":"https:\/\/logicnextgen.com\/tutorials\/wp-json\/wp\/v2\/pages\/714\/revisions\/991"}],"wp:attachment":[{"href":"https:\/\/logicnextgen.com\/tutorials\/wp-json\/wp\/v2\/media?parent=714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}