In this section, we will guide you through the process of creating your first Playwright script using TypeScript. This will involve setting up a basic test that opens a browser, navigates to a webpage, and performs a simple action. By the end of this lesson, you will have a foundational understanding of how to write and execute a Playwright script.

Before writing your first script, ensure you have a Node.js environment set up and Playwright installed. If you haven't done this yet, refer to the previous section on Installing Playwright.

1. Create a new directory for your Playwright project if you haven't already:

   mkdir playwright-demo
   cd playwright-demo
   

2. Initialize a new Node.js project:

   npm init -y
   

3. Install Playwright and TypeScript:

   npm install playwright typescript ts-node @types/node --save-dev
   

4. Create a tsconfig.json file to configure TypeScript:

   {
     "compilerOptions": {
       "target": "ES6",
       "module": "commonjs",
       "strict": true,
       "esModuleInterop": true,
       "skipLibCheck": true,
       "forceConsistentCasingInFileNames": true
     }
   }
   

5. Create a new TypeScript file for your script:

   touch firstScript.ts
   

Open firstScript.ts in your preferred code editor and add the following code:

• Importing Playwright: We import the chromium object from Playwright, which allows us to control the Chromium browser.
• Launching the Browser: We launch a new browser instance with headless: false to see the browser actions.
• Creating a New Page: We create a new browser context and page, which is where our interactions will occur.
• Navigating to a Webpage: The page.goto() function navigates to the specified URL.
• Taking a Screenshot: We use page.screenshot() to capture the current state of the page and save it as example.png.
• Closing the Browser: Finally, we close the browser to end the session.

To execute your script, run the following command in your terminal:

This command will run your TypeScript file using ts-node, which compiles and executes TypeScript code.

Task: Modify the script to navigate to a different website and perform a different action, such as clicking a button or filling out a form.

1. Modify the URL in the page.goto() function to a website of your choice.

2. Add an action such as clicking a button:

   await page.click('selector-for-button');
   

3. Run the script again to see the changes in action.

• Ensure Playwright is installed: If you encounter errors related to missing modules, verify that Playwright and TypeScript are installed correctly.
• Check your selectors: When interacting with elements, ensure that your selectors are accurate and match the elements on the page.
• Use headless: false during development to visually debug your script.

Congratulations! You've successfully created and executed your first Playwright script using TypeScript. This foundational knowledge will be crucial as you progress through more complex scenarios and test cases. In the next section, we will delve deeper into Playwright's core concepts to enhance your understanding and capabilities.