{"id":21842,"date":"2023-05-29T05:00:00","date_gmt":"2023-05-29T03:00:00","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=21842&#038;category=hard-development"},"modified":"2023-05-29T12:04:05","modified_gmt":"2023-05-29T10:04:05","slug":"ttrace-viewer-in-playwright-how-to-get-a-detailed-test-report","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/en\/ttrace-viewer-in-playwright-how-to-get-a-detailed-test-report\/","title":{"rendered":"Trace Viewer in Playwright \u2013 how to get a detailed test report?"},"content":{"rendered":"\n<p>In the first part of the series of articles on Playwright, I showed you how to use the tool along with C#. <a href=\"https:\/\/sii.pl\/blog\/en\/playwright-why-should-you-get-interested-in-the-microsoft-tool\/?category=testing&amp;tag=przeglad-narzedzi-en,playwright-2,pros-and-cons,tools\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">You can read the article on the Sii blog<\/a>. This time I would like to discuss a useful feature available in Playwright \u2013 the so-called Trace Viewer. It distinguishes Playwright from other tools and gives the user access to a detailed test report. This allows finding errors and thoroughly tracing what went wrong, enabling catching an application error even more accurately. Additionally, it provides detailed information for developers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is Trace Viewer for?<\/strong><\/h2>\n\n\n\n<p>Trace Viewer can support us through:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Screenshots \u2013 after each action, Playwright creates a screenshot. Thanks to the significant number of screenshots taken during the test, Playwright provides an accurate test run.<\/li>\n\n\n\n<li>Snapshots \u2013 the entire HTML DOM for each action is downloaded.<\/li>\n\n\n\n<li>Sources \u2013 this property allows setting information in the Trace Viewer about what line of code triggered a specific action.<\/li>\n<\/ul>\n\n\n\n<p>All this information is useful when, for some reason, the test tends to work one time and not work another. <strong>Also, when the test is working properly, presenting the test in this form can be useful for the whole team, or when the error occurs in the application and not in the test itself, it is easier to trace what went wrong.<\/strong> It is easier for us to find out why a particular test does not pass. We can decide on our own through Playwright\u2019s configuration files whether we want to enable the use of the Trace Viewer during tests or not.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Let\u2019s begin!<\/strong><\/h2>\n\n\n\n<p>To obtain useful logs, we need to initialize the use of \u201cTracing\u201d during our tests.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/1-2.png\"><img decoding=\"async\" width=\"605\" height=\"153\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/1-2.png\" alt=\"inicjacja Tracingu\" class=\"wp-image-21666\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/1-2.png 605w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/1-2-300x76.png 300w\" sizes=\"(max-width: 605px) 100vw, 605px\" \/><\/a><\/figure>\n\n\n\n<p>In the settings of the <em>Context.Tracing.StartAsync()<\/em> method, we define what logs are to be saved when we run our automated tests. <strong>Screenshots<\/strong> save a record of each action during the test.<strong> Snapshots<\/strong> save the HTML DOM of each action that happens. <strong>Sources<\/strong> allow collecting information about which line of code is responsible for a particular action.<\/p>\n\n\n\n<p>In addition to using the <em>StartAsync()<\/em> method, in the end, we need to define in the class the ending of log saving in the <em>TearDown<\/em> method, which allows us to indicate the name under which we will save the .zip file with the logs. <strong>It is worth adding the so-called Guide in the name<\/strong> \u2013 it will give us a unique name for the log file every time we run a test. In a situation where the name is fixed, for example just \u201cblog_sii_meetup\u201d, every test run will exchange the report.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/2-2.png\"><img decoding=\"async\" width=\"605\" height=\"226\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/2-2.png\" alt=\"fragment kodu\" class=\"wp-image-21668\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/2-2.png 605w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/2-2-300x112.png 300w\" sizes=\"(max-width: 605px) 100vw, 605px\" \/><\/a><\/figure>\n\n\n\n<p>After running the test, the .zip file with the logs will be saved in the project\u2019s bin directory. You can find these methods alongside sample tests <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/sii-poland\/PlaywrightCSharp\/blob\/main\/PlaywrightTests\/Tests\/BaseSetup.cs\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >in the code available on Sii\u2019s GitHub<\/a> in the BaseSetup.cs class. I recommend downloading and checking them locally.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Running the test<\/strong><\/h2>\n\n\n\n<p>First, I recommend going into the system\u2019s directory, where the log file is located. The bin directory is the default location, unless you chose a different path during the Trace Viewer setup. Here, I open PowerShell and run the <em>.playwright.ps1 script<\/em>, which contains various useful features you can use.<\/p>\n\n\n\n<p>In that case, to see the Trace Viewer, I run the command:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">playwright.ps1 show-trace nazwa_pliku_z_logami.zip <\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>File_name_with_logs.zip \u2013 this is the newly generated log file, created each time the test is run.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/3-2.png\"><img decoding=\"async\" width=\"755\" height=\"411\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/3-2.png\" alt=\"Newly generated file with logs\" class=\"wp-image-21670\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/3-2.png 755w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/3-2-300x163.png 300w\" sizes=\"(max-width: 755px) 100vw, 755px\" \/><\/a><figcaption class=\"wp-element-caption\">Fig. 1 Newly generated file with logs<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/4-1.png\"><img decoding=\"async\" width=\"605\" height=\"199\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/4-1.png\" alt=\"widok konsoli\" class=\"wp-image-21672\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/4-1.png 605w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/4-1-300x99.png 300w\" sizes=\"(max-width: 605px) 100vw, 605px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Displaying the report<\/strong><\/h3>\n\n\n\n<p>After running the script, a menu with various options will be displayed. In this case, we are interested in the \u201cshow-trace\u201d option, which, basing on a given .zip file, allows us to display a report. First, we see a screen with all the actions collected during the running test displayed on the left.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/7.png\"><img decoding=\"async\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/7.png\" alt=\"Show trace \u00ac\u2013 report display\" class=\"wp-image-21674\" width=\"756\" height=\"425\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/7.png 756w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/7-300x169.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/7-555x312.png 555w\" sizes=\"(max-width: 756px) 100vw, 756px\" \/><\/a><figcaption class=\"wp-element-caption\">Fig. 2 Show trace \u00ad\u2013 report display<\/figcaption><\/figure>\n\n\n\n<p>The first tab in the Trace Viewer is responsible for collecting actions performed during our test. The second, located next to it, is \u201cMetadata\u201d. It contains basic information about the duration, resolution, and time of conduct of the automated test.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/5-1.png\"><img decoding=\"async\" width=\"213\" height=\"266\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/5-1.png\" alt=\"The Metadata tab in Trace Viewer\" class=\"wp-image-21676\"\/><\/a><figcaption class=\"wp-element-caption\">Fig. 3 The Metadata tab in Trace Viewer<\/figcaption><\/figure>\n\n\n\n<p>In the following steps, in the middle of the screen, the Trace Viewer provides us with a screenshot of the test run. In this case, this space is still empty because, in this step, the test has just started, and the viewer has not yet been launched.<\/p>\n\n\n\n<p>On the right side of the Trace Viewer there are other useful options. They include information on:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>actions,<\/li>\n\n\n\n<li>console,<\/li>\n\n\n\n<li>information derived from the console,<\/li>\n\n\n\n<li>code references.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/6.png\"><img decoding=\"async\" width=\"334\" height=\"249\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/6.png\" alt=\"Test run in Trace Viewer\" class=\"wp-image-21678\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/6.png 334w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/6-300x224.png 300w\" sizes=\"(max-width: 334px) 100vw, 334px\" \/><\/a><figcaption class=\"wp-element-caption\">Fig. 4 Test run in Trace Viewer<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Call \u2013 contains potential logs and information about what action took place and how long it lasted.<\/li>\n\n\n\n<li>Console \u2013 contains information (if there is any) from the console.<\/li>\n\n\n\n<li>Network \u2013 contains information (if there is any) about particular requests.<\/li>\n\n\n\n<li>Source \u2013 contains information about which line of the code is responsible for the current step. In this case, it is line 17, which Playwright highlights here. Each subsequent action that we select from the menu on the left will be traceable. A screenshot will be available for the action of moving to a specific page (in this case, in line 19).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/8.png\"><img decoding=\"async\" width=\"605\" height=\"580\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/8.png\" alt=\"Wynik testu w Trace Viewerze\" class=\"wp-image-21680\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/8.png 605w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/8-300x288.png 300w\" sizes=\"(max-width: 605px) 100vw, 605px\" \/><\/a><figcaption class=\"wp-element-caption\">Fig. 5 Trace Viewer test results<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Summary<\/strong><\/h2>\n\n\n\n<p>In today\u2019s post, I have shown you how to use the Trace Viewer and generate an accurate test run report. Keep in mind that the report itself is generated by default for each test separately and that it affects the timing of test runs. However, we can decide when we want to generate it, for instance, when an error sometimes occurs.<\/p>\n\n\n\n<p>In the next article, I will demonstrate how we can record a video of the test and integrate Playwright with Allure, a popular tool for creating test reports.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Playwright Trace Viewer in practice<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-e3f9c00c-8faf-497d-9ec7-1d0cc9291ea5\" href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/playwright_trace_viewer-1.mp4\">playwright_trace_viewer-1<\/a><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/playwright_trace_viewer-1.mp4\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-e3f9c00c-8faf-497d-9ec7-1d0cc9291ea5\">Pobierz<\/a><\/div>\n\n\n\n<p>***<\/p>\n\n\n\n<p>On our blog you will also find <a href=\"https:\/\/sii.pl\/blog\/en\/search\/playwright\/\" target=\"_blank\" aria-label=\"other articles about Playwright. (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">other articles about Playwright.<\/a><\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;21842&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;5&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;11&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;5\\\/5 ( votes: 5)&quot;,&quot;size&quot;:&quot;18&quot;,&quot;title&quot;:&quot;Trace Viewer in Playwright \u2013 how to get a detailed test report?&quot;,&quot;width&quot;:&quot;139.5&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ( {votes}: {count})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 139.5px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 14.4px;\">\n            5\/5 ( votes: 5)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>In the first part of the series of articles on Playwright, I showed you how to use the tool along &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/en\/ttrace-viewer-in-playwright-how-to-get-a-detailed-test-report\/\">Continued<\/a><\/p>\n","protected":false},"author":215,"featured_media":21685,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":4,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1320],"tags":[1706,1639,1634,1620,1590],"class_list":["post-21842","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hard-development","tag-playwright-en","tag-przeglad-narzedzi-en","tag-automated-tests","tag-testy-automatyczne-en","tag-tools"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/Trace-Viewer-w-Playwright-\u2013-jak-uzyskac-szczegolowy-raport-z-testow.jpg","category_names":["Hard development"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts\/21842"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/users\/215"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/comments?post=21842"}],"version-history":[{"count":2,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts\/21842\/revisions"}],"predecessor-version":[{"id":21968,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts\/21842\/revisions\/21968"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/media\/21685"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/media?parent=21842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/categories?post=21842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/tags?post=21842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}