Playwright Tutorial: Output Console logs as step traces to UI watch Mode & Traceviewer

• 00:31 Run the Playwright Test UI tool
• 01:00 Adding console output to a test
• 01:36 Viewing console output
• 02:17 Outputting dynamic values
• 03:11 Checking dynamic console output

In this video, we learn how to output console logs in Playwright's UI tool traceviewer and actions tab to facilitate debugging during test automation. Here are the steps followed in the tutorial:

1. Run the Playwright Test UI tool: Run the following command in the terminal: npx playwright test --ui. This should open the Playwright Test UI tool.

2. Adding console output to a test: To add console output to a test, go back to the test file and use the page.evaluate() method. For example, to output a static string, add the following code after an input action:

   await page.evaluate(() => {
     console.log('subscribe');
   });

3. Viewing console output: Go back to the UI tool, and you should see a new page.evaluate action right after the input action. Click on the page.evaluate action, and you should see the static string (e.g., 'subscribe') in the console output.

4. Outputting dynamic values: To output dynamic values, such as input value or text content, create a locator for the element, and pass it through the page.evaluate() method. For example, to output the input value of a text box:

   // Create a locator for the input element
   const inputLocator = page.locator('input[type="text"]');
   
   // Get the input value
   const inputValue = await inputLocator.inputValue();
   
   // Pass the input value to page.evaluate()
   await page.evaluate((val) => {
     console.log('subscribe');
     console.log(val);
   }, inputValue);

5. After saving the changes, go back to the UI tool, click on the page.evaluate action, and you should see the dynamic value (e.g., 'product2') in the console output.

In summary, this video demonstrates how to effectively use debugging outputs in Playwright's UI tool and traceviewer to manage and troubleshoot running test cases.