Merge pull request #120 from argos-ci/article-playwright-trace

blog: playwright trace article

articles/playwright-trace/index.mdx

@@ -0,0 +1,67 @@
+---
+title: "Time-Travel Debugging: A Playwright Traces Tutorial"
+description: "Dive into the world of efficient CI debugging with Playwright Traces. This guide offers practical insights for developers to effortlessly diagnose and fix failed tests."
+category: Playwright
+author: Jeremy Sfez
+date: 2023-12-12
+image: ./main.jpg
+imageAlt: Playwright Inspector
+---
+
+**Ever wished you could replay a test that failed in your CI?** That's where Playwright Traces come in! This guide shows how it seamlessly fits into your CI workflow, making bug-hunting easier and more effective.
+
+<MainImage />
+
+## Debugging Trace in Action
+
+Let's jump right into a practical scenario. In the video below, I'll show how to use the Playwright Trace Viewer to inspect a failed test, identify the issue, and apply a fix.
+
+<iframe
+  width="800"
+  height="400"
+  src="https://www.youtube.com/embed/MTgNbdG6I3A"
+  title="Argos Playwright Demo"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+  allowFullScreen
+  className="mx-auto"
+/>
+
+In this video, I focus on resolving a complex locator issue. Besides this, Playwright Trace Viewer offers an extensive array of features for pinpointing test failures, including network logs, and console messages or step-by-step snapshots, not covered here.
+
+## Integrating with Your CI
+
+### 1. Record Traces when a Test Fails
+
+To automatically record traces on your CI, simply update your Playwright config file with this option:
+
+```ts
+use: {
+  trace: 'on-first-retry',
+}
+```
+
+Now, whenever a test fails, a trace file is generated, ready for download or online viewing with a third-party reporter.
+
+### 2. Open Trace Files
+
+To open a Trace file, either upload it to [trace.playwright.dev](https://trace.playwright.dev) or run the command:
+
+```sh
+npx playwright show-trace <TRACE_FILE_PATH>.zip
+```
+
+### 3. Third-Party Reporting with Argos
+
+To enhance your workflow, you can integrate your CI with [Argos](https://argos-ci.com) for direct access to Playwright Traces online. This seamless connection eliminates the need to download trace files, offering a more streamlined approach.
+
+Check out the [Argos Playwright setup guide](https://argos-ci.com/docs/quickstart/playwright) for easy integration steps.
+
+![Github fail test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtfqg293cx1z2ebpd5kr.png)
+
+![Argos with Trace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ec6ynjjslthxw7jznai.png)
+
+## Sources
+
+- [Playwright Trace Viewer Documentation](https://playwright.dev/docs/trace-viewer)
+- [Argos Documentation](https://docs.argos-ci.com)
+- [Debbie O'Brien's Video on Playwright Traces](https://www.youtube.com/watch?v=lfxjs--9ZQs) by [Debbie O'Brien](https://twitter.com/debs_obrien)