[{"data":1,"prerenderedAt":365},["ShallowReactive",2],{"blog-article-/blog/reports-tracing-tests-in-playwright":3,"blog-surround-/blog/reports-tracing-tests-in-playwright":356},{"id":4,"title":5,"body":6,"canonical":340,"date":341,"description":12,"extension":342,"featured":343,"image":344,"meta":345,"navigation":250,"ogImage":347,"path":348,"provider":349,"published":250,"seo":350,"stem":351,"tags":352,"url":340,"__hash__":355},"blog/blog/reports-tracing-tests-in-playwright.md","Playwright Reports and Traces",{"type":7,"value":8,"toc":329},"minimark",[9,13,24,29,32,58,61,68,72,75,80,87,103,106,186,190,197,209,212,218,222,225,231,234,237,240,243,246,262,266,269,277,281,284,287,291,325],[10,11,12],"p",{},"Playwright will serve up a HTML report on your local server so you can easily walk through the steps of your test. You can also open a trace file which gives you even more powerful options of viewing, reporting, interacting and even debugging your tests.",[10,14,15,16,23],{},"If you are new to testing with Playwright, you might want to check out my previous post ",[17,18,22],"a",{"href":19,"rel":20},"https://debbie.codes/blog/getting-started-with-playwright-testing",[21],"nofollow","Getting Started with Playwright"," to get a better understanding of how Playwright works and how to easily get started with this amazing tool.",[25,26,28],"h2",{"id":27},"serving-the-html-report","Serving the Html Report",[10,30,31],{},"You can see a full report of your tests by running the following command.",[33,34,39],"pre",{"className":35,"code":36,"language":37,"meta":38,"style":38},"language-bash shiki shiki-themes github-light github-dark","npx playwright show-report\n","bash","",[40,41,42],"code",{"__ignoreMap":38},[43,44,47,51,55],"span",{"class":45,"line":46},"line",1,[43,48,50],{"class":49},"sScJk","npx",[43,52,54],{"class":53},"sZZnC"," playwright",[43,56,57],{"class":53}," show-report\n",[10,59,60],{},"This will open up a browser window with a report of your tests. It will show you what browsers where used to run your tests, how long each test took and it will report each step of the test. The steps are collapsible meaning you can click on it and expand it to see the code ran for that particular part of the test.",[10,62,63],{},[64,65],"img",{"alt":66,"src":67},"test report showing list of steps test made","https://res.cloudinary.com/debsobrien/image/upload/f_auto,q_auto/v1648215659/debbie.codes/blog/2022/test-report_dio73s.png",[25,69,71],{"id":70},"trace-viewer","Trace Viewer",[10,73,74],{},"This is one of my favourite features of Playwright. It allows you to view the trace file of your test and interact with it.",[76,77,79],"h3",{"id":78},"setting-the-trace-in-playwright-config","Setting the Trace in Playwright Config",[10,81,82,83,86],{},"To run the trace file you first need to modify the ",[40,84,85],{},"playwright.config.ts"," file. There are a few options listed below.",[88,89,90,94,97,100],"ul",{},[91,92,93],"li",{},"'off' - Do not record a trace",[91,95,96],{},"'on' - Record a trace for each test",[91,98,99],{},"'retain-on-failure' - Record a trace for each test, but remove it from successful test runs",[91,101,102],{},"'on-first-retry' - Record a trace only when retrying a test for the first time",[10,104,105],{},"For this example I have set the trace to 'on' so that I always get trace files for my tests.",[33,107,111],{"className":108,"code":109,"language":110,"meta":38,"style":38},"language-jsx shiki shiki-themes github-light github-dark","const config: PlaywrightTestConfig = {\n  ...\n  use: {\n    trace: 'on'\n  }\n  ...\n}\nexport default config\n","jsx",[40,112,113,136,142,148,157,163,168,174],{"__ignoreMap":38},[43,114,115,119,123,126,129,132],{"class":45,"line":46},[43,116,118],{"class":117},"szBVR","const",[43,120,122],{"class":121},"sj4cs"," config",[43,124,125],{"class":117},":",[43,127,128],{"class":49}," PlaywrightTestConfig",[43,130,131],{"class":117}," =",[43,133,135],{"class":134},"sVt8B"," {\n",[43,137,139],{"class":45,"line":138},2,[43,140,141],{"class":117},"  ...\n",[43,143,145],{"class":45,"line":144},3,[43,146,147],{"class":134},"  use: {\n",[43,149,151,154],{"class":45,"line":150},4,[43,152,153],{"class":134},"    trace: ",[43,155,156],{"class":53},"'on'\n",[43,158,160],{"class":45,"line":159},5,[43,161,162],{"class":134},"  }\n",[43,164,166],{"class":45,"line":165},6,[43,167,141],{"class":117},[43,169,171],{"class":45,"line":170},7,[43,172,173],{"class":134},"}\n",[43,175,177,180,183],{"class":45,"line":176},8,[43,178,179],{"class":117},"export",[43,181,182],{"class":117}," default",[43,184,185],{"class":134}," config\n",[76,187,189],{"id":188},"rerunning-the-report","Rerunning the Report",[10,191,192,193,196],{},"If you still have the html report open you can close it with ",[40,194,195],{},"Ctrl+C",". We now need to create a new report which contains the trace file.",[33,198,199],{"className":35,"code":36,"language":37,"meta":38,"style":38},[40,200,201],{"__ignoreMap":38},[43,202,203,205,207],{"class":45,"line":46},[43,204,50],{"class":49},[43,206,54],{"class":53},[43,208,57],{"class":53},[10,210,211],{},"Just like before the html report will open for you with a report of your test. But now at the very bottom you will see a Trace section with an image and a link to your trace. Clicking this link will open up your trace.",[10,213,214],{},[64,215],{"alt":216,"src":217},"report showing trace file zip","https://res.cloudinary.com/debsobrien/image/upload/f_auto,q_auto/v1648220070/debbie.codes/blog/2022/trace-viewer-zip_ebyd2q.png",[25,219,221],{"id":220},"viewing-the-trace-file","Viewing the Trace File",[10,223,224],{},"Once you have clicked on the trace link you will see a new browser window with your test' trace. This is a locally hosted PWA where you can play around with your test trace.",[10,226,227],{},[64,228],{"alt":229,"src":230},"trace viewer in browser window showing all the features it gives you","https://res.cloudinary.com/debsobrien/image/upload/f_auto,q_auto/v1648219793/debbie.codes/blog/2022/trace-viewer-broswer_jqoim0.png",[10,232,233],{},"At the top is the timeline where you can scroll across and see your page at different states depending on the action. Each action has a different color such as green for clicks and red for selects.",[10,235,236],{},"On the left had side is the actions and Metadata where you can see each action of your test. When you click on an action you will then see the outcome of that action in the middle part.",[10,238,239],{},"The middle part shows a DOM snapshot of your site with the action highlighted. The before tab shows you what the page was like before the action and the after tab shows you what the page looks like after the action has been clicked.",[10,241,242],{},"On the right hand side you can see the call for this action showing what the selector was, if it is in strict mode etc, the console log incase there are any console messages or errors, the network to see all network requests and the source for the tests.",[10,244,245],{},"Check out the video to see it in action.",[247,248,251,252,251,257,261],"video",{"width":249,"height":249,"controls":250},"auto",true,"\n  ",[253,254],"source",{"src":255,"type":256},"https://res.cloudinary.com/debsobrien/video/upload/f_auto,q_auto/v1648220640/debbie.codes/blog/2022/playwright-trace-viewer_kx8uws.mp4","video/mp4",[253,258],{"src":259,"type":260},"https://res.cloudinary.com/debsobrien/video/upload/f_auto,q_auto/v1648220640/debbie.codes/blog/2022/playwright-trace-viewer_kx8uws.ogg","video/ogg","\nYour browser does not support the video tag.\n",[25,263,265],{"id":264},"inspecting-the-dom-snapshot","Inspecting the DOM Snapshot",[10,267,268],{},"The really cool thing about this is that the snapshot of your site in the middle is actually a DOM snapshot meaning it is fully interactive. You can scroll it, click user events and even open the browser dev tools inside this dev tool. Very cool.",[247,270,251,271,251,274,261],{"width":249,"height":249,"controls":250},[253,272],{"src":273,"type":256},"https://res.cloudinary.com/debsobrien/video/upload/f_auto,q_auto/v1648220649/debbie.codes/blog/2022/playwright-trace-inspect_wvfjb9.mp4",[253,275],{"src":276,"type":260},"https://res.cloudinary.com/debsobrien/video/upload/f_auto,q_auto/v1648220649/debbie.codes/blog/2022/playwright-trace-inspect_wvfjb9.ogg",[25,278,280],{"id":279},"conclusion","Conclusion",[10,282,283],{},"The trace viewer is a really cool way of going through your tests and inspecting them further. This is served as a PWA on your local host and therefore is completely safe as all your data is only on your machine.",[10,285,286],{},"There is so much more cool things you can do with Playwright and I highly encourage you to check it out especially is it is open source and therefore free to use. Take it for a spin. Have fun and let's get testing!",[25,288,290],{"id":289},"useful-links","Useful Links",[88,292,293,300,307,314,320],{},[91,294,295],{},[17,296,299],{"href":297,"rel":298},"https://playwright.dev/",[21],"Playwright docs",[91,301,302],{},[17,303,306],{"href":304,"rel":305},"https://playwright.dev/docs/cli#generate-code",[21],"Codegen",[91,308,309],{},[17,310,313],{"href":311,"rel":312},"https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright",[21],"VS Code Extension",[91,315,316],{},[17,317,71],{"href":318,"rel":319},"https://playwright.dev/docs/trace-viewer",[21],[91,321,322],{},[17,323,22],{"href":19,"rel":324},[21],[326,327,328],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}",{"title":38,"searchDepth":138,"depth":138,"links":330},[331,332,336,337,338,339],{"id":27,"depth":138,"text":28},{"id":70,"depth":138,"text":71,"children":333},[334,335],{"id":78,"depth":144,"text":79},{"id":188,"depth":144,"text":189},{"id":220,"depth":138,"text":221},{"id":264,"depth":138,"text":265},{"id":279,"depth":138,"text":280},{"id":289,"depth":138,"text":290},null,"2022-03-25","md",false,"v1648219793/debbie.codes/blog/2022/trace-viewer-broswer_jqoim0.png",{"loading":346},"eager","https://res.cloudinary.com/debsobrien/image/upload/f_webp,q_80,c_fit,w_480/v1648219793/debbie.codes/blog/2022/trace-viewer-broswer_jqoim0.png","/blog/reports-tracing-tests-in-playwright","cloudinary",{"title":5,"description":12},"blog/reports-tracing-tests-in-playwright",[353,354],"testing","playwright","9vzU27Jg0_NcMRrHgSzYpwx7hdjmy7LRHUgrGmQa5-E",[357,361],{"title":358,"path":359,"stem":360,"children":-1},"Debugging Tests in Playwright","/blog/debugging-tests-in-playwright","blog/debugging-tests-in-playwright",{"title":362,"path":363,"stem":364,"children":-1},"Design Tokens and Theming","/blog/design-tokens-and-theming","blog/design-tokens-and-theming",1790839747323]