{"id":23352,"date":"2020-09-21T22:45:48","date_gmt":"2020-09-21T22:45:48","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/?p=23352"},"modified":"2021-12-06T11:34:44","modified_gmt":"2021-12-06T19:34:44","slug":"playing-with-playwright","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/","title":{"rendered":"Playing with Playwright"},"content":{"rendered":"\n<p id=\"h.8eko6wfm79xv\"><em>Coding recipes using the newest automation testing tool<\/em><\/p>\n\n\n\n<p>There\u2019s a new kid on the block in the world of automation testing tools\u2026.Playwright!<\/p>\n\n\n\n<p>Created by Microsoft, Playwright is an open source browser automation framework that allows JavaScript engineers to test their web applications on Chromium, Webkit, and Firefox browsers.<\/p>\n\n\n\n<p>While Playwright is still very new, there\u2019s quite a buzz around the tool. So, I decided to try it out for myself.<\/p>\n\n\n\n<p>The <a href=\"https:\/\/playwright.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">Playwright documentation<\/a>&nbsp;contains a ton of information about how to get started as well as details on their APIs. So, I won\u2019t rehash all of that here. Instead, I will automate real scenarios from the <a href=\"https:\/\/automationbookstore.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">Automation Bookstore<\/a>&nbsp;application, which will demonstrate examples of using the Playwright APIs together.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"742\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/1_bookstore_app.jpg\" alt=\"1 bookstore app\" class=\"wp-image-23350\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/1_bookstore_app.jpg 1600w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/1_bookstore_app-300x139.jpg 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/1_bookstore_app-1024x475.jpg 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/1_bookstore_app-768x356.jpg 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/1_bookstore_app-1536x712.jpg 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"h.yhxd15ncqlop\">Launching an Application<\/h1>\n\n\n\n<p>First things first&#8230;launching the browser and navigating to the application\u2019s url.<\/p>\n\n\n\n<p>The first step to do this is to declare which browser engines you\u2019d like to run against. Again, Playwright allows you to run your tests against Chromium, Firefox, and Webkit.<\/p>\n\n\n\n<p>I\u2019ll only run against Chromium for now.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/e463c59b566a40401d2f76c9b9355cf7.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/e463c59b566a40401d2f76c9b9355cf7\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>Sidenote: By default, Playwright runs in headless mode. If you\u2019d like to actually see the browser as it\u2019s executing the test, set headless to false in the launch call:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/9cdf8aedcd49db5b1946aec7370d6e18.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/9cdf8aedcd49db5b1946aec7370d6e18\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>Next, I declare variables for the browser and the page objects.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/8d2f1d05e4f353c8774a2b6178769293.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/8d2f1d05e4f353c8774a2b6178769293\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>An important thing to note about Playwright, is that all of their APIs are asynchronous, so async\/await is needed to call them. So, I utilize this pattern to launch the browser and initial the page object.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/d8ddff7cc40a3fd9b645c4dace5d0788.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/d8ddff7cc40a3fd9b645c4dace5d0788\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>Now that I have the page object, I can go to my application using page.goto()<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/676d0d2a1d96c91ea6ca67ff05e857cc.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/676d0d2a1d96c91ea6ca67ff05e857cc\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"h.2h9k95c8fk8n\">Adding an Assertion Library<\/h1>\n\n\n\n<p>A key thing to note about Playwright, is like many other automated testing tools, it is designed to automate browser interaction, but you must use an <a href=\"https:\/\/playwright.dev\/#version=v1.4.0&amp;path=docs%2Ftest-runners.md\" target=\"_blank\" rel=\"noopener noreferrer\">assertion tool<\/a>&nbsp;for your verifications. I\u2019ll use <a href=\"https:\/\/testautomationu.applitools.com\/mocha-javascript-tests\/\">Mocha<\/a>&nbsp;for this example.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/3feb093fd048da6d26490776a8a44681.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/3feb093fd048da6d26490776a8a44681\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>I\u2019ll also add a suite (using \u2018describe\u2019) and move the Playwright calls inside of there into before\/after functions.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/8976f5ebce314a64681a6d677334aa08.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/8976f5ebce314a64681a6d677334aa08\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"h.7rchdcwrkzru\">Accessing Elements<\/h1>\n\n\n\n<p>When trying a new tool, I like to start with a very simple example. Basically, the \u201cHello World\u201d of web test automation is verifying the title on the page. So, let\u2019s start there and make the first test!<\/p>\n\n\n\n<p>Playwright offers <a href=\"https:\/\/playwright.dev\/#version=v1.4.0&amp;path=docs%2Fselectors.md\" target=\"_blank\" rel=\"noopener noreferrer\">many ways to access elements<\/a>&nbsp;including the typical ones of CSS and Xpath selectors.<\/p>\n\n\n\n<p>When inspecting the DOM of this application, the element that displays the title has an id of \u2018page-title\u2019, and the text I want to verify is the inner text of this element.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/61e92846ba39ba4cb5dda8d282bc13ea.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/61e92846ba39ba4cb5dda8d282bc13ea\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>So, I\u2019ll use page.innerText and pass in the CSS selector for this id.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/4b038545f2ffb03618028096ca90f254.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/4b038545f2ffb03618028096ca90f254\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>And voila, just like that, I have my very first test!<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/9fb37df888b933962866a64dd1e07a10.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/9fb37df888b933962866a64dd1e07a10\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>To run a Playwright test, type <strong>npm test<\/strong>&nbsp;from your terminal.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"h.1h3ay4ioh7ji\">Entering Text<\/h1>\n\n\n\n<p>Now that I\u2019m up and running, I\u2019d like to do something a little more interesting, such as search for a book.<\/p>\n\n\n\n<p>To do so, I need to enter text into the Filter Books field (which has an id of \u2018searchBar\u2019).<\/p>\n\n\n\n<p>To enter text, Playwright provides the fill() API, which accepts a selector as well as the text to enter.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/8c42b58393c58391ec6c1e86ae61692c.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/8c42b58393c58391ec6c1e86ae61692c\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"h.t5lqjnj7shr6\">Waiting for Elements<\/h1>\n\n\n\n<p>Playwright does a great job of waiting for the elements to be ready before attempting to interact with them, so I don\u2019t have to worry about that. However, sometimes explicitly waiting is still needed.<\/p>\n\n\n\n<p>&nbsp;For example, when I enter text into the field, Playwright will wait for the field since that\u2019s the element we\u2019re interacting with, but the verification needs to occur on the search results.<\/p>\n\n\n\n<p>There is a slight delay between the time that the text is entered and when the results are shown, so my script must account for that.<\/p>\n\n\n\n<p>Fortunately, in the latest release of Playwright&nbsp;(1.4), the <a href=\"https:\/\/playwright.dev\/#version=v1.4.0&amp;path=docs%2Fapi.md&amp;q=pagewaitforselectorselector-options\" target=\"_blank\" rel=\"noopener noreferrer\">waitForSelector API<\/a>&nbsp;was introduced. I can use this to wait until hidden books become present in the DOM.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/80472de480f646bb86b2eed399dbb322.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/80472de480f646bb86b2eed399dbb322\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"h.q3bke4l7m6c0\">Getting List of Elements<\/h1>\n\n\n\n<p>Now that I have the search results, I want to verify that there is only one book returned. To get a list of the elements, I use the $$ API on the page object to query for all elements matching a given selector.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/33b6cf07a72b8c954032d659bf0c6fa2.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/33b6cf07a72b8c954032d659bf0c6fa2\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>Now, that I have this list of elements, I can verify that it only contains one book.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/3d6712497ef85d335fd62d15d21bcb64.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/3d6712497ef85d335fd62d15d21bcb64\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"h.xh2qelizbji0\">Accessing Children Elements<\/h1>\n\n\n\n<p>In addition to verifying the quantity, I also need to verify that the title is as expected. Since I have a list of all of the visible books, I don\u2019t know exactly what the ID will be for the book at runtime, so I\u2019d prefer to just get the child element from the visible book that holds the title. This is an h2 element, as seen on line 4.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/a38915f2d10f8b7225ee87a68319220f.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/a38915f2d10f8b7225ee87a68319220f\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>To access descendant elements in Playwright, you can use Clauses. Clauses are selectors that are separated by &gt;&gt;, where each clause is a selector that is relative to the one before it.<\/p>\n\n\n\n<p>So, in my case, where I\u2019d like to get h2 that is a child of this particular li, I can do so with \u2018li:not(.ui-screen-hidden) &gt;&gt; h2\u2019<\/p>\n\n\n\n<p>And now the second test is done! On line 5 is where the parent selector is defined, and line 8 is where I expand to use a clause to target a child node.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/87deb80d49c7dacbaf31e1fe5e4be25a.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/87deb80d49c7dacbaf31e1fe5e4be25a\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>This particular scenario used a list that only contains one element, so I added one more scenario that demonstrates how to work with a list of multiple elements.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/ea1e1a3c9ffcff067c75078a9e414cbd.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/ea1e1a3c9ffcff067c75078a9e414cbd\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"h.pu0xe1l0ljlm\">Visual Testing<\/h1>\n\n\n\n<p>That last scenario got a bit long, and honestly, I\u2019m only verifying a fraction of what I should be verifying. For more thorough tests that not only verify the count and title, but also verify everything else on the page in addition to making sure it\u2019s displayed correctly, I\u2019ll use visual testing.<\/p>\n\n\n\n<p>Note that Playwright offers image and video capture, but it\u2019s more meant as a visual logging mechanism, and can\u2019t be used in the assertions themselves. So, I\u2019m going to use a proper visual testing assertion library, Applitools.<\/p>\n\n\n\n<p>After <a href=\"https:\/\/app14743.cloudwayssites.com\/tutorials\/playwright.html\">installing Applitools<\/a>, I specify the Applitools classes required on line 3.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/9a449e23e7d90d5e5093aeea0b6793e2.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/9a449e23e7d90d5e5093aeea0b6793e2\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>I declare and initialize the \u2018eyes\u2019 object (on line 3), which is the API that does the visual testing.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/a1540e6cc02d3eb7893f3044235f6f77.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/a1540e6cc02d3eb7893f3044235f6f77\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>Then redo the last test using visual testing.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/e337241c42373a3bccc983fffd446c51.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/e337241c42373a3bccc983fffd446c51\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"h.etkou2qxaosa\">Cross Platform Tests<\/h1>\n\n\n\n<p>While Playwright provides support for Chromium, Webkit, and Firefox, there is no built-in support for IE.<\/p>\n\n\n\n<p>When integrating Playwright with Applitools\u2019 Ultrafast Grid, I can now get further coverage for my tests!<\/p>\n\n\n\n<p>As opposed to using the Applitools Classic Runner as I have above, I\u2019m going to modify it to use the Visual Grid Runner. On line 5, notice I use the number 10. This indicates the number of tests I\u2019d like to run in parallel&#8230;making my run even faster!<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/43ff2914631b546723af7fdb9b1a1355.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/43ff2914631b546723af7fdb9b1a1355\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>Now for the good part! I can specify all of the browsers, devices, and viewports I\u2019d like to run against &#8211; giving me the ultimate cross-platform coverage for my tests. Not only verifying them functionally, but also visually as well.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/fd269981b95479cf491afce914faee68.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/fd269981b95479cf491afce914faee68\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>No changes are needed to the tests themselves, they will automatically run across all of the specified configurations.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1410\" height=\"684\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/2_ultrafast_grid.png\" alt=\"2 ultrafast grid\" class=\"wp-image-23351\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/2_ultrafast_grid.png 1410w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/2_ultrafast_grid-300x146.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/2_ultrafast_grid-1024x497.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/2_ultrafast_grid-768x373.png 768w\" sizes=\"(max-width: 1410px) 100vw, 1410px\" \/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"h.phcujm3oys2p\">Play with Playwright Yourself<\/h1>\n\n\n\n<p>Reading blog posts helped me understand what Playwright is but when I played around with it to explore realistic scenarios is when I truly got a feel for the tool! I recommend you do the same.<\/p>\n\n\n\n<p>You can use the <a href=\"https:\/\/github.com\/angiejones\/playwright\" target=\"_blank\" rel=\"noopener noreferrer\">code examples<\/a>&nbsp;from this blog post as well as <a href=\"https:\/\/playwright.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">Playwright\u2019s documentation<\/a>&nbsp;to get started. Good luck!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Coding recipes using the newest automation testing tool There\u2019s a new kid on the block in the world of automation testing tools\u2026.Playwright! Created by Microsoft, Playwright is an open source&#8230;<\/p>\n","protected":false},"author":31,"featured_media":23366,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12271],"tags":[10027,10324,10056,10061,10085,10102,16608],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.5 (Yoast SEO v24.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Playing with Playwright - AI-Powered End-to-End Testing | Applitools<\/title>\n<meta name=\"description\" content=\"Playwright is the newest test automation framework from Microsoft. Angie Jones provides several coding recipes to get started using Playwright.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Playing with Playwright\" \/>\n<meta property=\"og:description\" content=\"Coding recipes using the newest automation testing tool There\u2019s a new kid on the block in the world of automation testing tools\u2026.Playwright! Created by\" \/>\n<meta property=\"og:url\" content=\"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/\" \/>\n<meta property=\"og:site_name\" content=\"AI-Powered End-to-End Testing | Applitools\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-21T22:45:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-06T19:34:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/playwright-testing.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1808\" \/>\n\t<meta property=\"og:image:height\" content=\"1781\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Angie Jones\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Angie Jones\" \/>\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:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/\"},\"author\":{\"name\":\"Angie Jones\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/bef60d60f816d3253a3e37120c0b9bba\"},\"headline\":\"Playing with Playwright\",\"datePublished\":\"2020-09-21T22:45:48+00:00\",\"dateModified\":\"2021-12-06T19:34:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/\"},\"wordCount\":1533,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/playwright-testing.png\",\"keywords\":[\"Automated Visual Testing\",\"Chrome\",\"FireFox\",\"Functional Testing\",\"Javascript\",\"Microsoft\",\"Playwright\"],\"articleSection\":[\"Getting Started\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/\",\"name\":\"Playing with Playwright - AI-Powered End-to-End Testing | Applitools\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/playwright-testing.png\",\"datePublished\":\"2020-09-21T22:45:48+00:00\",\"dateModified\":\"2021-12-06T19:34:44+00:00\",\"description\":\"Playwright is the newest test automation framework from Microsoft. Angie Jones provides several coding recipes to get started using Playwright.\",\"breadcrumb\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/#primaryimage\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/playwright-testing.png\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/playwright-testing.png\",\"width\":1808,\"height\":1781},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Started\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/blog\/category\/getting-started\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Playing with Playwright\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/\",\"name\":\"Applitools Visual AI\",\"description\":\"Applitools delivers full end-to-end test automation with AI infused at every step.\",\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/app14743.cloudwayssites.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\",\"name\":\"Applitools\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png\",\"width\":156,\"height\":28,\"caption\":\"Applitools\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/bef60d60f816d3253a3e37120c0b9bba\",\"name\":\"Angie Jones\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60864923503620d0b54e2493ef75b9d8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60864923503620d0b54e2493ef75b9d8?s=96&d=mm&r=g\",\"caption\":\"Angie Jones\"},\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/author\/angiejones\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Playing with Playwright - AI-Powered End-to-End Testing | Applitools","description":"Playwright is the newest test automation framework from Microsoft. Angie Jones provides several coding recipes to get started using Playwright.","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:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/","og_locale":"en_US","og_type":"article","og_title":"Playing with Playwright","og_description":"Coding recipes using the newest automation testing tool There\u2019s a new kid on the block in the world of automation testing tools\u2026.Playwright! Created by","og_url":"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/","og_site_name":"AI-Powered End-to-End Testing | Applitools","article_published_time":"2020-09-21T22:45:48+00:00","article_modified_time":"2021-12-06T19:34:44+00:00","og_image":[{"width":1808,"height":1781,"url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/playwright-testing.png","type":"image\/png"}],"author":"Angie Jones","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Angie Jones","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/#article","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/"},"author":{"name":"Angie Jones","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/bef60d60f816d3253a3e37120c0b9bba"},"headline":"Playing with Playwright","datePublished":"2020-09-21T22:45:48+00:00","dateModified":"2021-12-06T19:34:44+00:00","mainEntityOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/"},"wordCount":1533,"commentCount":0,"publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/playwright-testing.png","keywords":["Automated Visual Testing","Chrome","FireFox","Functional Testing","Javascript","Microsoft","Playwright"],"articleSection":["Getting Started"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/","url":"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/","name":"Playing with Playwright - AI-Powered End-to-End Testing | Applitools","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/#primaryimage"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/playwright-testing.png","datePublished":"2020-09-21T22:45:48+00:00","dateModified":"2021-12-06T19:34:44+00:00","description":"Playwright is the newest test automation framework from Microsoft. Angie Jones provides several coding recipes to get started using Playwright.","breadcrumb":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/#primaryimage","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/playwright-testing.png","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/09\/playwright-testing.png","width":1808,"height":1781},{"@type":"BreadcrumbList","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/playing-with-playwright\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/app14743.cloudwayssites.com\/"},{"@type":"ListItem","position":2,"name":"Getting Started","item":"https:\/\/app14743.cloudwayssites.com\/blog\/category\/getting-started\/"},{"@type":"ListItem","position":3,"name":"Playing with Playwright"}]},{"@type":"WebSite","@id":"https:\/\/app14743.cloudwayssites.com\/#website","url":"https:\/\/app14743.cloudwayssites.com\/","name":"Applitools Visual AI","description":"Applitools delivers full end-to-end test automation with AI infused at every step.","publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/app14743.cloudwayssites.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/app14743.cloudwayssites.com\/#organization","name":"Applitools","url":"https:\/\/app14743.cloudwayssites.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png","width":156,"height":28,"caption":"Applitools"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/bef60d60f816d3253a3e37120c0b9bba","name":"Angie Jones","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60864923503620d0b54e2493ef75b9d8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60864923503620d0b54e2493ef75b9d8?s=96&d=mm&r=g","caption":"Angie Jones"},"url":"https:\/\/app14743.cloudwayssites.com\/blog\/author\/angiejones\/"}]}},"_links":{"self":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/23352"}],"collection":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/comments?post=23352"}],"version-history":[{"count":0,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/23352\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media\/23366"}],"wp:attachment":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media?parent=23352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/categories?post=23352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/tags?post=23352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}