{"id":6071,"date":"2025-04-07T08:10:03","date_gmt":"2025-04-07T06:10:03","guid":{"rendered":"https:\/\/www.aiknow.io\/?p=6071"},"modified":"2025-04-07T08:10:03","modified_gmt":"2025-04-07T06:10:03","slug":"introduction-to-playwright","status":"publish","type":"post","link":"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/","title":{"rendered":"Introduction to Playwright"},"content":{"rendered":"<p class=\"\" data-start=\"66\" data-end=\"466\"><a href=\"https:\/\/playwright.dev\/\"><strong>Playwright<\/strong> <\/a>is an end-to-end testing library developed by Microsoft, allowing you to create and automate tests to ensure web applications function as expected across different web browsers and operating systems.<br data-start=\"276\" data-end=\"279\" \/>It supports various programming languages (Typescript, .NET, Java, etc.) and platforms (Windows, Linux, macOS), and can be integrated into CI\/CD pipelines, automating the testing process.<\/p>\n<p class=\"\" data-start=\"468\" data-end=\"547\">Compared to other frameworks, Playwright offers several significant advantages:<\/p>\n<p data-start=\"281\" data-end=\"313\"><strong data-start=\"286\" data-end=\"311\">Speed and Reliability<\/strong><\/p>\n<ul>\n<li data-start=\"316\" data-end=\"393\">Runs tests in parallel across multiple browsers with minimal configuration.<\/li>\n<li data-start=\"396\" data-end=\"484\">Supports headless mode (without a visible UI) for faster and more efficient execution.<\/li>\n<\/ul>\n<p data-start=\"486\" data-end=\"518\"><strong data-start=\"491\" data-end=\"516\">Multi-Browser Support<\/strong><\/p>\n<ul data-start=\"519\" data-end=\"611\">\n<li class=\"\" data-start=\"519\" data-end=\"611\">\n<p class=\"\" data-start=\"521\" data-end=\"611\">Compatible with <strong data-start=\"537\" data-end=\"566\">Chromium, Firefox, WebKit<\/strong>, and provides features for mobile testing.<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"613\" data-end=\"643\"><strong data-start=\"618\" data-end=\"641\">Advanced Automation<\/strong><\/p>\n<ul>\n<li data-start=\"646\" data-end=\"742\">Simulates complex interactions such as <strong data-start=\"685\" data-end=\"702\">drag-and-drop<\/strong>, file handling, and network behavior.<\/li>\n<li data-start=\"745\" data-end=\"804\">Supports API testing, extending automation beyond the UI.<\/li>\n<\/ul>\n<p data-start=\"806\" data-end=\"834\"><strong data-start=\"811\" data-end=\"832\">Resilient Testing<\/strong><\/p>\n<ul>\n<li data-start=\"837\" data-end=\"925\">Implements an <strong data-start=\"851\" data-end=\"875\">auto-retry mechanism<\/strong>, reducing test failures due to slow page loads.<\/li>\n<li data-start=\"928\" data-end=\"1031\">Supports advanced waiting conditions, avoiding the need for <strong data-start=\"988\" data-end=\"999\">sleep()<\/strong> and improving test stability.<\/li>\n<\/ul>\n<p data-start=\"1033\" data-end=\"1058\"><strong data-start=\"1038\" data-end=\"1056\">Easy Debugging<\/strong><\/p>\n<ul>\n<li data-start=\"1061\" data-end=\"1162\">Captures screenshots and video recordings of test executions, making error analysis more efficient.<\/li>\n<li data-start=\"1165\" data-end=\"1300\">Includes an <strong data-start=\"1177\" data-end=\"1203\">interactive debug mode<\/strong>, allowing developers to pause test execution and inspect the application\u2019s state in real time.<\/li>\n<\/ul>\n<p data-start=\"1302\" data-end=\"1330\"><strong data-start=\"1307\" data-end=\"1328\">CI\/CD Integration<\/strong><\/p>\n<ul data-start=\"1331\" data-end=\"1488\">\n<li class=\"\" data-start=\"1331\" data-end=\"1488\">\n<p class=\"\" data-start=\"1333\" data-end=\"1488\">Seamlessly integrates with <strong data-start=\"1360\" data-end=\"1386\">continuous integration<\/strong> tools like GitHub Actions, Jenkins, and GitLab CI, enabling automated testing for every deployment.<\/p>\n<\/li>\n<\/ul>\n<p class=\"\" data-start=\"1685\" data-end=\"1842\">In this article, we will use the library with Typescript to test a web application, utilizing the dedicated Playwright plugin available in the <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-playwright.playwright\">VS Code store<\/a>.<\/p>\n<h1><span style=\"font-weight: 400;\">Tool Features<\/span><\/h1>\n<h2><span style=\"font-weight: 400;\">Step Recording<\/span><\/h2>\n<p>You can start recording a test and its steps by selecting <strong data-start=\"117\" data-end=\"141\">Testing &gt; Record New<\/strong>, where the recording of actions will begin as you navigate through the application.<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\" wp-image-6043 aligncenter\" src=\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025133424-197x300.png\" alt=\"Picture 1: section Testing VS Code\" width=\"374\" height=\"569\" srcset=\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025133424-197x300.png 197w, https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025133424.png 604w\" sizes=\"(max-width: 374px) 100vw, 374px\" \/><\/p>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Picture 1: section Testing VS Code<\/span><\/em><\/p>\n<p>&nbsp;<\/p>\n<p class=\"\" data-start=\"37\" data-end=\"218\">At this point, <strong data-start=\"52\" data-end=\"76\">Playwright&#8217;s CodeGen<\/strong> will be launched, supported by the VS Code plugin, to simplify the automated creation of tests. This tool offers several features, including:<\/p>\n<ul>\n<li data-start=\"222\" data-end=\"308\">An interactive browser that automatically records the actions performed by the user.<\/li>\n<li data-start=\"311\" data-end=\"413\">A test file generated in VS Code, containing the instructions corresponding to the recorded actions.<\/li>\n<li data-start=\"416\" data-end=\"514\">A toolbar integrated into the browser, useful for analyzing the elements of the web application.<\/li>\n<\/ul>\n<p class=\"\" data-start=\"516\" data-end=\"577\">Among the most notable features of the toolbar, we highlight:<\/p>\n<ul>\n<li data-start=\"581\" data-end=\"723\"><strong data-start=\"581\" data-end=\"597\">Pick-locator<\/strong>: allows you to select an element on the page and generate a JavaScript instruction in VS Code to reference it in the tests.<\/li>\n<li data-start=\"726\" data-end=\"913\"><strong data-start=\"726\" data-end=\"762\">Assert (visibility, text, value)<\/strong>: enables the automatic creation of a JavaScript instruction in VS Code to check specific properties of an element, such as visibility, text, or value.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\" wp-image-6046 aligncenter\" src=\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025165912-300x203.png\" alt=\"Figure 2: View with CodeGen running.\" width=\"451\" height=\"305\" srcset=\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025165912-300x203.png 300w, https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025165912-1024x692.png 1024w, https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025165912-768x519.png 768w, https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025165912-1536x1038.png 1536w, https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025165912.png 2019w\" sizes=\"(max-width: 451px) 100vw, 451px\" \/><\/p>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Figure 2: View with CodeGen running.<\/span><\/em><\/p>\n<p class=\"\" data-start=\"37\" data-end=\"149\">To stop the recording and close the <strong data-start=\"73\" data-end=\"84\">CodeGen<\/strong> tool, you can use the recording button available on the toolbar.<\/p>\n<p><img decoding=\"async\" class=\"size-medium wp-image-6049 aligncenter\" src=\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025170032-300x103.png\" alt=\"Figure 3: Toolbar and recording button.\" width=\"300\" height=\"103\" srcset=\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025170032-300x103.png 300w, https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025170032.png 356w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Figure 3: Toolbar and recording button.<\/span><\/em><\/p>\n<h2><span style=\"font-weight: 400;\">Running a test<\/span><\/h2>\n<p class=\"\" data-start=\"58\" data-end=\"95\">To start running a test, you can use:<\/p>\n<ul>\n<li data-start=\"99\" data-end=\"203\">The graphical interface provided by the VS Code plugin, which simplifies test execution and debugging.<\/li>\n<li data-start=\"206\" data-end=\"294\">The <strong data-start=\"210\" data-end=\"228\">Playwright CLI<\/strong>, for greater control and integration into automation processes.<\/li>\n<\/ul>\n<p class=\"\" data-start=\"296\" data-end=\"477\">Within the execution settings section, you can configure specific parameters to customize the behavior of the tests, optimizing the testing environment based on the project&#8217;s needs.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-6052 aligncenter\" src=\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025135059-274x300.png\" alt=\"Figure 4: Playwright settings in VS Code. \" width=\"365\" height=\"400\" srcset=\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025135059-274x300.png 274w, https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025135059.png 654w\" sizes=\"(max-width: 365px) 100vw, 365px\" \/><\/p>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Figure 4: Playwright settings in VS Code.<\/span><\/em><\/p>\n<ul>\n<li data-start=\"39\" data-end=\"125\"><strong data-start=\"39\" data-end=\"51\">Projects<\/strong>: allows you to select the browsers on which the tests will be executed.<\/li>\n<li data-start=\"129\" data-end=\"211\"><strong data-start=\"129\" data-end=\"141\">Settings<\/strong>: lets you configure the execution by choosing from different modes:\n<ul>\n<li style=\"list-style-type: none;\">\n<ul data-start=\"37\" data-end=\"955\">\n<li data-start=\"216\" data-end=\"314\"><strong data-start=\"216\" data-end=\"226\">Headed<\/strong>: displays the browser during execution, allowing you to observe actions in real time.<\/li>\n<li data-start=\"319\" data-end=\"407\"><strong data-start=\"319\" data-end=\"335\">Trace Viewer<\/strong>: enables an advanced tool to analyze the actions performed in detail.<\/li>\n<li data-start=\"412\" data-end=\"487\"><strong data-start=\"412\" data-end=\"424\">Headless<\/strong>: runs the tests in silent mode, without opening the browser.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"491\" data-end=\"568\"><strong data-start=\"491\" data-end=\"500\">Tools<\/strong>: provides additional tools for analyzing and debugging the tests.\n<ul>\n<li style=\"list-style-type: none;\">\n<ul data-start=\"37\" data-end=\"955\">\n<li data-start=\"572\" data-end=\"700\"><strong data-start=\"572\" data-end=\"588\">Pick Locator<\/strong>: allows you to identify and select an element within the web application, as seen during the recording phase.<\/li>\n<li data-start=\"703\" data-end=\"749\"><strong data-start=\"703\" data-end=\"717\">Record New<\/strong>: starts recording a new test.<\/li>\n<li data-start=\"752\" data-end=\"861\"><strong data-start=\"752\" data-end=\"772\">Record at Cursor<\/strong>: records actions in the active file, inserting them starting from the cursor position.<\/li>\n<li data-start=\"864\" data-end=\"955\"><strong data-start=\"864\" data-end=\"886\">Reveal Test Output<\/strong>: opens the page containing the results of the last test execution.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-6055 aligncenter\" src=\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025135105-297x300.png\" alt=\"Figure 5: Test explorer in VS Code.&lt;br&gt; &lt;br&gt;\" width=\"297\" height=\"300\" srcset=\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025135105-297x300.png 297w, https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025135105.png 680w\" sizes=\"(max-width: 297px) 100vw, 297px\" \/><\/p>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Figure 5: Test explorer in VS Code.<\/span><\/em><\/p>\n<p>You can use the <strong data-start=\"53\" data-end=\"65\">Explorer<\/strong> section in VS Code to run tests, with the option to enable debug mode and set breakpoints. This allows you to execute the code step by step, monitor the execution, and analyze the variables in real-time.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-6058 aligncenter\" src=\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025135110-300x79.png\" alt=\"Figure 6: Execution buttons on the test. \" width=\"763\" height=\"201\" srcset=\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025135110-300x79.png 300w, https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025135110-768x202.png 768w, https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025135110.png 1008w\" sizes=\"(max-width: 763px) 100vw, 763px\" \/><\/p>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Figure 6: Execution buttons on the test.<\/span><\/em><\/p>\n<p class=\"\" data-start=\"37\" data-end=\"136\">Right-clicking on the buttons displays additional options, such as the ability to start debug mode.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-6061 aligncenter\" src=\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025135115-300x148.png\" alt=\"Figure 7: Example of execution in VS Code.&lt;br&gt; &lt;br&gt; \" width=\"752\" height=\"371\" srcset=\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025135115-300x148.png 300w, https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025135115-768x378.png 768w, https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/03\/Pasted-image-20241025135115.png 812w\" sizes=\"(max-width: 752px) 100vw, 752px\" \/><\/p>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Figure 7: Example of execution in VS Code.<\/span><\/em><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h1><span style=\"font-weight: 400;\">Test automation with GitLab CI\/CD.<\/span><\/h1>\n<p>Tests can be integrated within the repository of a web app. In combination with deploying to a designated environment, it is possible to create a job that automatically runs the available tests on the endpoint.<\/p>\n<pre>  <span style=\"font-weight: 400;\"># Variables  <\/span>\r\n  <span style=\"font-weight: 400;\">variables<\/span><span style=\"font-weight: 400;\">:  <\/span>\r\n\r\n    <span style=\"font-weight: 400;\">BASE_URL<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400;\">$BASE_URL<\/span> <span style=\"font-weight: 400;\"># variable defined in GitLab Project CI\/CD Settings  \r\n<\/span>    <span style=\"font-weight: 400;\"># Define the stages for your pipeline  <\/span>\r\n  <span style=\"font-weight: 400;\">stages<\/span><span style=\"font-weight: 400;\">:  <\/span>\r\n<span style=\"font-weight: 400;\">    - <\/span><span style=\"font-weight: 400;\">test<\/span>  \r\n  \r\n  <span style=\"font-weight: 400;\"># Define the job for running Playwright tests  <\/span>\r\n  <span style=\"font-weight: 400;\">run_playwright_tests<\/span><span style=\"font-weight: 400;\">:  <\/span>\r\n    <span style=\"font-weight: 400;\">stage<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400;\">test<\/span>  \r\n    <span style=\"font-weight: 400;\">image<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400;\">mcr.microsoft.com\/playwright:v1.39.0-jammy<\/span>  \r\n\r\n    <span style=\"font-weight: 400;\">script<\/span><span style=\"font-weight: 400;\">:  <\/span>\r\n<span style=\"font-weight: 400;\">      - <\/span><span style=\"font-weight: 400;\">npm ci<\/span> <span style=\"font-weight: 400;\"># Install project dependencies  <\/span>\r\n<span style=\"font-weight: 400;\">      - <\/span><span style=\"font-weight: 400;\">npx playwright test<\/span> <span style=\"font-weight: 400;\"># Run your Playwright tests   <\/span>\r\n<span style=\"font-weight: 400;\">      - <\/span><span style=\"font-weight: 400;\">echo \"https:\/\/$CI_PROJECT_NAMESPACE.gitlab.io\/-\/$CI_PROJECT_NAME\/-\/jobs\/$CI_JOB_ID\/artifacts\/playwright-report\/index.html\"<\/span> <span style=\"font-weight: 400;\"># print the URL to view the results  \r\n<\/span>\r\n    <span style=\"font-weight: 400;\">allow_failure<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400;\">true<\/span>   \r\n\r\n<span style=\"font-weight: 400;\"># Publish Playwright test results as artifacts and keep for 2 days  <\/span>\r\n\r\n  <span style=\"font-weight: 400;\">artifacts<\/span><span style=\"font-weight: 400;\">:  <\/span>\r\n    <span style=\"font-weight: 400;\">when<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400;\">always<\/span>  \r\n    <span style=\"font-weight: 400;\">paths<\/span><span style=\"font-weight: 400;\">:  <\/span>\r\n<span style=\"font-weight: 400;\">      - <\/span><span style=\"font-weight: 400;\">playwright-report<\/span>  \r\n<span style=\"font-weight: 400;\">    expire_in: 2 days<\/span>\r\n<\/pre>\n<p>&nbsp;<\/p>\n<hr \/>\n<h1><span style=\"font-weight: 400;\">Custom result reporting with the Reporter feature.<\/span><\/h1>\n<p>Playwright provides the option to implement a custom Reporter, different from the default one, for advanced management of test step results. The Reporter is a component of the library that receives all the data related to the test execution, allowing for custom analysis and reporting.<\/p>\n<pre>  <span style=\"font-weight: 400;\">import<\/span><span style=\"font-weight: 400;\"> { <\/span><span style=\"font-weight: 400;\">FullConfig<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">FullResult<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">Reporter<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">Suite<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">TestCase<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">TestError<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">TestResult<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">TestStep<\/span><span style=\"font-weight: 400;\"> } <\/span><span style=\"font-weight: 400;\">from<\/span> <span style=\"font-weight: 400;\">\"playwright\/types\/testReporter\"<\/span><span style=\"font-weight: 400;\">;<\/span>\r\n\r\n  <span style=\"font-weight: 400;\">class<\/span> <span style=\"font-weight: 400;\">TestResultReporter<\/span> <span style=\"font-weight: 400;\">implements<\/span> <span style=\"font-weight: 400;\">Reporter<\/span><span style=\"font-weight: 400;\"> {<\/span>\r\n    <span style=\"font-weight: 400;\">onBegin<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">config<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">FullConfig<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">suite<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">Suite<\/span><span style=\"font-weight: 400;\">)<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">void<\/span><span style=\"font-weight: 400;\"> {<\/span>\r\n<span style=\"font-weight: 400;\">    }<\/span>\r\n    <span style=\"font-weight: 400;\">onEnd<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">result<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">FullResult<\/span><span style=\"font-weight: 400;\">)<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">Promise<\/span><span style=\"font-weight: 400;\">&lt;{ <\/span><span style=\"font-weight: 400;\">status<\/span><span style=\"font-weight: 400;\">?:<\/span> <span style=\"font-weight: 400;\">FullResult<\/span><span style=\"font-weight: 400;\">[<\/span><span style=\"font-weight: 400;\">\"status\"<\/span><span style=\"font-weight: 400;\">]; } <\/span><span style=\"font-weight: 400;\">|<\/span> <span style=\"font-weight: 400;\">undefined<\/span> <span style=\"font-weight: 400;\">|<\/span> <span style=\"font-weight: 400;\">void<\/span><span style=\"font-weight: 400;\">&gt; <\/span><span style=\"font-weight: 400;\">|<\/span> <span style=\"font-weight: 400;\">void<\/span><span style=\"font-weight: 400;\"> {<\/span>\r\n<span style=\"font-weight: 400;\">    }<\/span>\r\n    <span style=\"font-weight: 400;\">onError<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">error<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">TestError<\/span><span style=\"font-weight: 400;\">)<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">void<\/span><span style=\"font-weight: 400;\"> {<\/span>\r\n<span style=\"font-weight: 400;\">    }<\/span>\r\n    <span style=\"font-weight: 400;\">onExit<\/span><span style=\"font-weight: 400;\">()<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">Promise<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">void<\/span><span style=\"font-weight: 400;\">&gt; {<\/span>\r\n      <span style=\"font-weight: 400;\">return<\/span> <span style=\"font-weight: 400;\">new<\/span> <span style=\"font-weight: 400;\">Promise<\/span><span style=\"font-weight: 400;\">(() <\/span><span style=\"font-weight: 400;\">=&gt;<\/span><span style=\"font-weight: 400;\"> {});<\/span>\r\n<span style=\"font-weight: 400;\">    }<\/span>\r\n    <span style=\"font-weight: 400;\">onStdErr<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">chunk<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">string<\/span> <span style=\"font-weight: 400;\">|<\/span> <span style=\"font-weight: 400;\">Buffer<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">test<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">void<\/span> <span style=\"font-weight: 400;\">|<\/span> <span style=\"font-weight: 400;\">TestCase<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">result<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">void<\/span> <span style=\"font-weight: 400;\">|<\/span> <span style=\"font-weight: 400;\">TestResult<\/span><span style=\"font-weight: 400;\">)<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">void<\/span><span style=\"font-weight: 400;\"> {<\/span>\r\n<span style=\"font-weight: 400;\">    }<\/span>\r\n    <span style=\"font-weight: 400;\">onStdOut<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">chunk<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">string<\/span> <span style=\"font-weight: 400;\">|<\/span> <span style=\"font-weight: 400;\">Buffer<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">test<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">void<\/span> <span style=\"font-weight: 400;\">|<\/span> <span style=\"font-weight: 400;\">TestCase<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">result<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">void<\/span> <span style=\"font-weight: 400;\">|<\/span> <span style=\"font-weight: 400;\">TestResult<\/span><span style=\"font-weight: 400;\">)<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">void<\/span><span style=\"font-weight: 400;\"> {<\/span>\r\n<span style=\"font-weight: 400;\">    }<\/span>\r\n    <span style=\"font-weight: 400;\">onStepBegin<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">test<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">TestCase<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">result<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">TestResult<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">step<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">TestStep<\/span><span style=\"font-weight: 400;\">)<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">void<\/span><span style=\"font-weight: 400;\"> {<\/span>\r\n<span style=\"font-weight: 400;\">    }<\/span>\r\n    <span style=\"font-weight: 400;\">onStepEnd<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">test<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">TestCase<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">result<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">TestResult<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">step<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">TestStep<\/span><span style=\"font-weight: 400;\">)<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">void<\/span><span style=\"font-weight: 400;\"> {<\/span>\r\n<span style=\"font-weight: 400;\">    }<\/span>\r\n    <span style=\"font-weight: 400;\">onTestBegin<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">test<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">TestCase<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">result<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">TestResult<\/span><span style=\"font-weight: 400;\">)<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">void<\/span><span style=\"font-weight: 400;\"> {<\/span>\r\n<span style=\"font-weight: 400;\">    }<\/span>\r\n    <span style=\"font-weight: 400;\">onTestEnd<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">test<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">TestCase<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">result<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">TestResult<\/span><span style=\"font-weight: 400;\">)<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">void<\/span><span style=\"font-weight: 400;\"> {<\/span>\r\n<span style=\"font-weight: 400;\">    }<\/span>\r\n\r\n    <span style=\"font-weight: 400;\">printsToStdio<\/span><span style=\"font-weight: 400;\">()<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">boolean<\/span><span style=\"font-weight: 400;\"> {<\/span>\r\n      <span style=\"font-weight: 400;\">return<\/span> <span style=\"font-weight: 400;\">true<\/span><span style=\"font-weight: 400;\">;<\/span>\r\n<span style=\"font-weight: 400;\">    }\r\n<\/span><span style=\"font-weight: 400;\">  }<\/span><\/pre>\n<p>The Reporter can then be used by specifying it in the <strong data-start=\"91\" data-end=\"115\">playwright.config.ts<\/strong> configuration file, where you can configure the desired reporting type and integrate it with other custom functionalities.<\/p>\n<pre><span style=\"font-weight: 400;\">import<\/span><span style=\"font-weight: 400;\"> { <\/span><span style=\"font-weight: 400;\">defineConfig<\/span><span style=\"font-weight: 400;\"> } <\/span><span style=\"font-weight: 400;\">from<\/span> <span style=\"font-weight: 400;\">'@playwright\/test'<\/span><span style=\"font-weight: 400;\">;<\/span>\r\n<span style=\"font-weight: 400;\">export<\/span> <span style=\"font-weight: 400;\">default<\/span> <span style=\"font-weight: 400;\">defineConfig<\/span><span style=\"font-weight: 400;\">(<\/span>\r\n<span style=\"font-weight: 400;\">{  <\/span>\r\n   <span style=\"font-weight: 400;\">reporter:<\/span> <span style=\"font-weight: 400;\">'.\/my-awesome-reporter.ts'<\/span><span style=\"font-weight: 400;\">,<\/span>\r\n<span style=\"font-weight: 400;\"> }<\/span>\r\n<span style=\"font-weight: 400;\">);<\/span><\/pre>\n<p>For example, within the various callbacks, it is possible to send the results directly to a database via queries, allowing for centralized management and easy consultation of test data.<\/p>\n<pre>  <span style=\"font-weight: 400;\">onTestEnd<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">test<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400;\">TestCase<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">result<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400;\">TestResult<\/span><span style=\"font-weight: 400;\">): <\/span><span style=\"font-weight: 400;\">void<\/span><span style=\"font-weight: 400;\"> {<\/span>\r\n    <span style=\"font-weight: 400;\">const<\/span> <span style=\"font-weight: 400;\">connection<\/span> <span style=\"font-weight: 400;\">=<\/span> <span style=\"font-weight: 400;\">await<\/span> <span style=\"font-weight: 400;\">mysql<\/span><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">createConnection<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">dbConfig<\/span><span style=\"font-weight: 400;\">);  <\/span><span style=\"font-weight: 400;\">\/\/ Crea una connessione al database<\/span>\r\n      <span style=\"font-weight: 400;\">const<\/span> <span style=\"font-weight: 400;\">testCaseResult<\/span> <span style=\"font-weight: 400;\">=<\/span> <span style=\"font-weight: 400;\">await<\/span> <span style=\"font-weight: 400;\">connection<\/span><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">execute<\/span><span style=\"font-weight: 400;\">(<\/span>\r\n  <span style=\"font-weight: 400;\">`INSERT INTO test_cases (test_case_id, test_description, test_results, browser_name, execution_time, execution_error, execution_date, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`<\/span><span style=\"font-weight: 400;\">,<\/span>\r\n\r\n<span style=\"font-weight: 400;\">      [<\/span>\r\n          <span style=\"font-weight: 400;\">test<\/span><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">id<\/span> <span style=\"font-weight: 400;\">||<\/span> <span style=\"font-weight: 400;\">null<\/span><span style=\"font-weight: 400;\">,<\/span>\r\n          <span style=\"font-weight: 400;\">test<\/span><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">title<\/span> <span style=\"font-weight: 400;\">||<\/span> <span style=\"font-weight: 400;\">null<\/span><span style=\"font-weight: 400;\">,<\/span>\r\n          <span style=\"font-weight: 400;\">test<\/span><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">results<\/span><span style=\"font-weight: 400;\">,<\/span>\r\n          <span style=\"font-weight: 400;\">test<\/span><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">browserName<\/span> <span style=\"font-weight: 400;\">||<\/span> <span style=\"font-weight: 400;\">null<\/span><span style=\"font-weight: 400;\">,<\/span>\r\n          <span style=\"font-weight: 400;\">result<\/span><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">duration<\/span><span style=\"font-weight: 400;\">,<\/span>\r\n          <span style=\"font-weight: 400;\">result<\/span><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">error<\/span> <span style=\"font-weight: 400;\">||<\/span> <span style=\"font-weight: 400;\">null<\/span><span style=\"font-weight: 400;\">,<\/span>\r\n          <span style=\"font-weight: 400;\">new<\/span> <span style=\"font-weight: 400;\">Date<\/span><span style=\"font-weight: 400;\">(),<\/span>\r\n          <span style=\"font-weight: 400;\">new<\/span> <span style=\"font-weight: 400;\">Date<\/span><span style=\"font-weight: 400;\">(),<\/span>\r\n          <span style=\"font-weight: 400;\">new<\/span> <span style=\"font-weight: 400;\">Date<\/span><span style=\"font-weight: 400;\">()<\/span>\r\n<span style=\"font-weight: 400;\">        ]<\/span>\r\n<span style=\"font-weight: 400;\">      );<\/span>\r\n    <span style=\"font-weight: 400;\">...<\/span>\r\n<span style=\"font-weight: 400;\">  }<\/span><\/pre>\n<h1><\/h1>\n<h1><span style=\"font-weight: 400;\">Conclusion<\/span><\/h1>\n<p class=\"\" data-start=\"54\" data-end=\"134\">The tool has been successfully employed in several testing use cases, including:<\/p>\n<ul data-start=\"136\" data-end=\"392\">\n<li class=\"\" data-start=\"136\" data-end=\"230\">\n<p class=\"\" data-start=\"138\" data-end=\"230\">Ensuring the <strong data-start=\"151\" data-end=\"169\">non-regression<\/strong> of existing functionalities when introducing new features.<\/p>\n<\/li>\n<li class=\"\" data-start=\"231\" data-end=\"307\">\n<p class=\"\" data-start=\"233\" data-end=\"307\">Running <strong data-start=\"241\" data-end=\"272\">reliability tests over time<\/strong> through the use of cyclic tests.<\/p>\n<\/li>\n<li class=\"\" data-start=\"308\" data-end=\"392\">\n<p class=\"\" data-start=\"310\" data-end=\"392\">Supporting the development of new features following a <strong data-start=\"365\" data-end=\"380\">test-driven<\/strong> approach.<\/p>\n<\/li>\n<\/ul>\n<p class=\"\" data-start=\"394\" data-end=\"676\">These applications have allowed us to improve test reliability, reduce verification times, and effectively simulate real-world usage scenarios. The tool has proven particularly useful in ensuring the quality of complex web applications, characterized by intricate user interactions.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Playwright is an end-to-end testing library developed by Microsoft, allowing you to create and automate tests to ensure web applications function as expected across different web browsers and operating systems.It supports various programming languages (Typescript, .NET, Java, etc.) and platforms (Windows, Linux, macOS), and can be integrated into CI\/CD pipelines, automating the testing process. Compared [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":6323,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[29],"tags":[175,173,176,174],"class_list":["post-6071","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech-news-en","tag-developed","tag-microsoft","tag-playwright-en","tag-vscode"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Introduction to Playwright - AIknow<\/title>\n<meta name=\"description\" content=\"Playwright is an end-to-end testing library developed by Microsoft, allowing you to create and automate tests to ensure web applications function as expected across different web browsers and operating systems.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction to Playwright - AIknow\" \/>\n<meta property=\"og:description\" content=\"Playwright is an end-to-end testing library developed by Microsoft, allowing you to create and automate tests to ensure web applications function as expected across different web browsers and operating systems.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/\" \/>\n<meta property=\"og:site_name\" content=\"AIknow\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-07T06:10:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-7-apr-2025-08_05_24-e1744006073892.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"928\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Michele Giovanelli\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michele Giovanelli\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/\"},\"author\":{\"name\":\"Michele Giovanelli\",\"@id\":\"https:\/\/www.aiknow.io\/en\/#\/schema\/person\/a989230a6d8434262e58f68af5c787c2\"},\"headline\":\"Introduction to Playwright\",\"datePublished\":\"2025-04-07T06:10:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/\"},\"wordCount\":951,\"publisher\":{\"@id\":\"https:\/\/www.aiknow.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-7-apr-2025-08_05_24-e1744006073892.png\",\"keywords\":[\"developed\",\"Microsoft\",\"Playwright\",\"VScode\"],\"articleSection\":[\"Tech news\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/\",\"url\":\"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/\",\"name\":\"Introduction to Playwright - AIknow\",\"isPartOf\":{\"@id\":\"https:\/\/www.aiknow.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-7-apr-2025-08_05_24-e1744006073892.png\",\"datePublished\":\"2025-04-07T06:10:03+00:00\",\"description\":\"Playwright is an end-to-end testing library developed by Microsoft, allowing you to create and automate tests to ensure web applications function as expected across different web browsers and operating systems.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/#primaryimage\",\"url\":\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-7-apr-2025-08_05_24-e1744006073892.png\",\"contentUrl\":\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-7-apr-2025-08_05_24-e1744006073892.png\",\"width\":1024,\"height\":928,\"caption\":\"playwright\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.aiknow.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introduction to Playwright\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.aiknow.io\/en\/#website\",\"url\":\"https:\/\/www.aiknow.io\/en\/\",\"name\":\"AIknow - Developing future\",\"description\":\"From Edge To Intelligence\",\"publisher\":{\"@id\":\"https:\/\/www.aiknow.io\/en\/#organization\"},\"alternateName\":\"AIknow\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.aiknow.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.aiknow.io\/en\/#organization\",\"name\":\"AIknow - Developing future\",\"url\":\"https:\/\/www.aiknow.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.aiknow.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2018\/06\/aiknow-logo_03.png\",\"contentUrl\":\"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2018\/06\/aiknow-logo_03.png\",\"width\":1596,\"height\":348,\"caption\":\"AIknow - Developing future\"},\"image\":{\"@id\":\"https:\/\/www.aiknow.io\/en\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.aiknow.io\/en\/#\/schema\/person\/a989230a6d8434262e58f68af5c787c2\",\"name\":\"Michele Giovanelli\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.aiknow.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7b9c0585ded6217182119647f2db095a000ea01873a85bb505b114f1f33c5aee?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7b9c0585ded6217182119647f2db095a000ea01873a85bb505b114f1f33c5aee?s=96&d=mm&r=g\",\"caption\":\"Michele Giovanelli\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introduction to Playwright - AIknow","description":"Playwright is an end-to-end testing library developed by Microsoft, allowing you to create and automate tests to ensure web applications function as expected across different web browsers and operating systems.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/","og_locale":"en_US","og_type":"article","og_title":"Introduction to Playwright - AIknow","og_description":"Playwright is an end-to-end testing library developed by Microsoft, allowing you to create and automate tests to ensure web applications function as expected across different web browsers and operating systems.","og_url":"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/","og_site_name":"AIknow","article_published_time":"2025-04-07T06:10:03+00:00","og_image":[{"width":1024,"height":928,"url":"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-7-apr-2025-08_05_24-e1744006073892.png","type":"image\/png"}],"author":"Michele Giovanelli","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Michele Giovanelli","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/#article","isPartOf":{"@id":"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/"},"author":{"name":"Michele Giovanelli","@id":"https:\/\/www.aiknow.io\/en\/#\/schema\/person\/a989230a6d8434262e58f68af5c787c2"},"headline":"Introduction to Playwright","datePublished":"2025-04-07T06:10:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/"},"wordCount":951,"publisher":{"@id":"https:\/\/www.aiknow.io\/en\/#organization"},"image":{"@id":"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/#primaryimage"},"thumbnailUrl":"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-7-apr-2025-08_05_24-e1744006073892.png","keywords":["developed","Microsoft","Playwright","VScode"],"articleSection":["Tech news"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/","url":"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/","name":"Introduction to Playwright - AIknow","isPartOf":{"@id":"https:\/\/www.aiknow.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/#primaryimage"},"image":{"@id":"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/#primaryimage"},"thumbnailUrl":"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-7-apr-2025-08_05_24-e1744006073892.png","datePublished":"2025-04-07T06:10:03+00:00","description":"Playwright is an end-to-end testing library developed by Microsoft, allowing you to create and automate tests to ensure web applications function as expected across different web browsers and operating systems.","breadcrumb":{"@id":"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/#primaryimage","url":"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-7-apr-2025-08_05_24-e1744006073892.png","contentUrl":"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-7-apr-2025-08_05_24-e1744006073892.png","width":1024,"height":928,"caption":"playwright"},{"@type":"BreadcrumbList","@id":"https:\/\/www.aiknow.io\/en\/introduction-to-playwright\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.aiknow.io\/en\/"},{"@type":"ListItem","position":2,"name":"Introduction to Playwright"}]},{"@type":"WebSite","@id":"https:\/\/www.aiknow.io\/en\/#website","url":"https:\/\/www.aiknow.io\/en\/","name":"AIknow - Developing future","description":"From Edge To Intelligence","publisher":{"@id":"https:\/\/www.aiknow.io\/en\/#organization"},"alternateName":"AIknow","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.aiknow.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.aiknow.io\/en\/#organization","name":"AIknow - Developing future","url":"https:\/\/www.aiknow.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.aiknow.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2018\/06\/aiknow-logo_03.png","contentUrl":"https:\/\/www.aiknow.io\/wpvt\/wp-content\/uploads\/2018\/06\/aiknow-logo_03.png","width":1596,"height":348,"caption":"AIknow - Developing future"},"image":{"@id":"https:\/\/www.aiknow.io\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.aiknow.io\/en\/#\/schema\/person\/a989230a6d8434262e58f68af5c787c2","name":"Michele Giovanelli","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.aiknow.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7b9c0585ded6217182119647f2db095a000ea01873a85bb505b114f1f33c5aee?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7b9c0585ded6217182119647f2db095a000ea01873a85bb505b114f1f33c5aee?s=96&d=mm&r=g","caption":"Michele Giovanelli"}}]}},"_links":{"self":[{"href":"https:\/\/www.aiknow.io\/en\/wp-json\/wp\/v2\/posts\/6071","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aiknow.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.aiknow.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.aiknow.io\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aiknow.io\/en\/wp-json\/wp\/v2\/comments?post=6071"}],"version-history":[{"count":11,"href":"https:\/\/www.aiknow.io\/en\/wp-json\/wp\/v2\/posts\/6071\/revisions"}],"predecessor-version":[{"id":6322,"href":"https:\/\/www.aiknow.io\/en\/wp-json\/wp\/v2\/posts\/6071\/revisions\/6322"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.aiknow.io\/en\/wp-json\/wp\/v2\/media\/6323"}],"wp:attachment":[{"href":"https:\/\/www.aiknow.io\/en\/wp-json\/wp\/v2\/media?parent=6071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.aiknow.io\/en\/wp-json\/wp\/v2\/categories?post=6071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.aiknow.io\/en\/wp-json\/wp\/v2\/tags?post=6071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}