In this tutorial, we’ll continue our exploration of Playwright and TypeScript by automating the process of filling out and submitting a form on a website. This example will demonstrate how to interact with input fields, checkboxes, and buttons.

Prerequisites

Before you begin, make sure you have completed the initial setup outlined in the previous blog post.

Getting Started

1. Writing the Script

Create a new TypeScript file in your project directory, such as form_submission.ts. Open the file in your code editor and paste the following code:

import { chromium, Browser, Page } from 'playwright';

(async () => {
  // Launch the browser
  const browser: Browser = await chromium.launch();

  // Create a new browser context
  const context = await browser.newContext();

  // Create a new page
  const page: Page = await context.newPage();

  // Navigate to the form page
  await page.goto('https://www.example-form.com');

  // Fill out the form
  await page.fill('#name', 'John Doe');
  await page.check('#subscribe');
  await page.selectOption('#gender', 'male');

  // Submit the form
  await page.click('#submit-button');

  // Wait for the form submission to complete
  await page.waitForSelector('#success-message');

  // Capture a screenshot of the success message
  await page.screenshot({ path: 'form_submission.png' });

  // Close the browser
  await browser.close();
})();

2. Compiling and Running the Script

Compile the TypeScript code into JavaScript using the TypeScript compiler:

tsc form_submission.ts

Then, run the compiled script with Node.js:

node form_submission.js

The script will navigate to a form page, fill out the form with sample data, submit it, wait for the success message to appear, and capture a screenshot of the success message.

Customization

You can customize the script to interact with different types of form elements, handle error scenarios, or automate other interactions on web pages.

Conclusion

In this example, we demonstrated how Playwright and TypeScript can be used to automate the process of filling out and submitting a form on a website. This combination of technologies enables developers to efficiently automate various web interactions and streamline testing processes.

Feel free to build upon this example and explore Playwright’s extensive documentation to discover more features and use cases.

Happy automating!

---

Feel free to adjust the example and the explanation according to your preferences. This example showcases how to interact with form elements and perform actions like filling out fields, checking checkboxes, selecting options from dropdowns, and capturing screenshots of success messages.