Discussion on Making Testing Fun with Playwright by Max Schmitt | Testμ 2023

Testμ Conference 2023
,
41

Hi,

The Playwright Trace Viewer is a graphical user interface (GUI) tool designed to facilitate the examination of recorded Playwright traces once the script has been executed.

With this tool, you can navigate both backward and forward through each step of the test, providing a visual representation of the events that transpired during each action.

42

Hi,

Fully automating accounts that utilize multi-factor authentication (MFA) is not possible, as they require manual intervention. However, one approach to partially automate MFA scenarios is by employing persistent authentication.

43

Hi,

Playwright supports debugging in both local development and continuous integration (CI) environments to help you identify and resolve issues in your tests.

Local Debugging:

  • Interactive Mode: Playwright offers an interactive mode that allows you to pause test execution at any point using the browserContext.pause function. This lets you inspect the state of the application, step through code, and diagnose issues interactively.

  • Console Logs: You can use console.log statements in your test code to print debug information to the console. Playwright will display these logs in the terminal, helping you understand what’s happening during the test.

  • Error Messages: Playwright provides detailed error messages when assertions fail or issues occur during test execution. These messages include stack traces and information about the failure, making it easier to pinpoint the problem.

  • VS Code Integration: If you’re using Visual Studio Code, there are Playwright extensions available that provide debugging support directly within the code editor. You can set breakpoints, step through code, and inspect variables just like in any other debugging session.

Debugging in CI Environment:

  • Capture Screenshots and Videos: Playwright allows you to capture screenshots and videos during test execution, even in a CI environment. If a test fails, these visual artifacts can help you understand the problem.

  • Generate Trace Files: Enabling tracing in your Playwright configuration (trace: true) generates trace files that record the entire test execution. You can download these trace files and use the Playwright Trace Viewer to analyze them and diagnose issues.

  • CI/CD Logs: Most CI/CD systems capture and store logs from test executions. Ensure that your test execution command and any debugging output (such as console logs) are correctly configured to be captured by your CI/CD environment.

  • Conditional Debugging: You can use environment variables or custom flags in your test scripts to conditionally enable debugging in CI. For example, you can set a flag that activates additional logging or captures screenshots only when a specific environment variable is present.

  • Artifact Storage: Store test artifacts, such as screenshots, videos, and trace files, in a location accessible from your CI/CD environment. This allows you to access and review these artifacts when needed.

44

Absolutely, Playwright’s live trace feature can be a lifesaver when you’re dealing with test failures or unexpected behavior. It’s like having a detailed playback of your test’s journey, and it can be incredibly helpful for identifying and debugging issues.

Here’s how it works:

Live Trace feature:

  • Enable Tracing: To use the live trace feature, you’ll need to enable tracing in your Playwright configuration. You do this by setting trace: true when defining your browser context or page in your configuration file.

  • Run Your Test: Execute your Playwright test as you normally would, and let it run. While the test is running, Playwright records a trace of everything that’s happening during the test execution.

  • Access the Live Trace: Now comes the cool part. While the test is running, you can access the live trace viewer through a web-based interface. This allows you to see exactly what the test is doing in real-time.

How it helps with debugging:

Imagine you have a test that’s supposed to log into a website and perform a series of actions, but it’s failing somewhere along the way. With the live trace feature:

  • Real-Time Insights: You can watch the test step by step in the trace viewer, just like watching a video. You’ll see the browser’s actions, page loads, clicks, and more, as they happen.
  • Isolate the Problem: If the test fails or behaves unexpectedly at a particular step, you can quickly pinpoint where the issue is occurring within the trace. For instance, you might notice that a button click didn’t happen as expected, or a page didn’t load correctly.
  • Analyze Network Activity: The trace viewer also includes network activity, so you can inspect API requests, responses, and any errors that might be occurring behind the scenes.
  • Screenshots and Videos: Playwright captures screenshots and videos during the test, which are embedded in the trace. If something looks off visually, you can examine these images to understand what the browser displayed at different points in the test.

Example:

  • Let’s say you’re testing an e-commerce website, and your test is supposed to add an item to the cart, proceed to checkout, and complete a purchase. However, the test keeps failing during the checkout step.

Using the live trace feature:

  • You start the test with tracing enabled.
  • As the test runs, you notice that the “Add to Cart” button click didn’t register.
  • You can see this in the trace viewer, which shows that the button wasn’t interacted with as expected.
  • You inspect the screenshot at that point and realize that the button was not visible due to a rendering issue.

With this information, you’ve identified the problem - a rendering issue with the “Add to Cart” button. You can then work on a solution to fix the issue in your test or report it to your development team.

So, Playwright’s live trace feature acts like a detective’s tool, allowing you to observe your test’s every move and uncover the root cause of issues in real-time. It’s a valuable asset for effective debugging.