Playwright was released by Microsoft in 2020. It is an open-source tool created by Andrey Lushnikov, who previously worked on another popular automation product, which is Puupeteer, developed by Google. Playwright is used to automate actions in the browser, but also allows API automation.<\/p>\n\n\n\n
Playwright’s strengths<\/strong><\/h2>\n\n\n\nThe tool has numerous interesting advantages, which is why it is worthy of your interest. I will outline them below.<\/p>\n\n\n\n
Auto Wait<\/strong><\/h3>\n\n\n\nIf you have ever worked on automatic UI tests, you probably know what a problem it can be to handle waits for various dynamic elements located on the page. For Selenium WebDriver, it is recommended to use the so-called Explicit wait, which should solve this problem. However, finding the right wait is not that easy sometimes. It affects how much JavaScript and asynchronous operations are used on the site.<\/p>\n\n\n\n
Playwright uses the so-called auto-wait mechanism. What does it mean? In most situations, we do not need to add additional wait for elements, as Playwright itself waits the elements and actions by default. Of course, in a more complex situation, when we need to wait for an element, Playwright provides methods that can be used.<\/p>\n\n\n\n
Using different programming languages<\/strong><\/h3>\n\n\n\nCurrently, Playwright is supported for several popular programming languages. They are:<\/p>\n\n\n\n
\n- Java,<\/li>\n\n\n\n
- C#,<\/li>\n\n\n\n
- JS\/TS,<\/li>\n\n\n\n
- Python.<\/li>\n<\/ul>\n\n\n\n
As a result, the solution in different language versions is finding wider use on the market.<\/p>\n\n\n\n
Documentation<\/strong><\/h3>\n\n\n\nPlaywright\u2019s documentation is excellent. The use of methods is described on the basis of practical examples, which help to take advantage of the tool’s capabilities. Also, the documentation that appears while invoking a method in the IDE is often enough to make real use of it.<\/p>\n\n\n\n
Popularity of the tool<\/strong><\/h2>\n\n\n\nIt is worth noting, that the number of Playwright users is growing, as you can see in the graph below.<\/p>\n\n\n\n![\"Ranking](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-1-2-1024x535.png\")
<\/a>Fig. 1 Ranking of framework usage in terms of the audience size<\/a><\/figcaption><\/figure>\n\n\n\nPlaywright, among the libraries used in tests, improved its score from 3% usage in the community in 2020 to 10% in 2021. This ranking relates to the Playwright JS\/TS version, however in my opinion, it is a noticeable popularity jump, that will be also likely noted for other language versions of the tool.<\/p>\n\n\n\n
Awareness of Playwright in the community has also improved, from 19% in 2020 to 34% a year later.<\/p>\n\n\n\n![\"Ranking](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-2-2-1024x533.png\")
<\/a>Fig. 2 Ranking on tool knowledge and awareness<\/a><\/figcaption><\/figure>\n\n\n\nWhile choosing the tools, it is worth paying attention to their popularity and positive reception by the community, which is something that Playwright has already established for itself.<\/p>\n\n\n\n
New versions delivery frequency<\/strong><\/h3>\n\n\n\n![\"Playwright](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-3-2-1024x721.png\")
Fig. 3 Playwright \u2013 new versions delivery frequency<\/figcaption><\/figure>\n\n\n\nIt is undoubtedly worth mentioning how fast Playwright is evolving. Every two weeks or so, a new version is added with some kind of improvements (you can check the frequency of changes on GitHub).<\/p>\n\n\n\n
When choosing a potential tool, I always pay attention to the size of the community behind it. In this case, it is Microsoft and its employees, but also a growing number of engaged people outside the company.<\/p>\n\n\n\n
Browsers supported by Playwright<\/strong><\/h3>\n\n\n\nCurrently Playwright supports all of the most popular web browsers, such as:<\/p>\n\n\n\n
\n- Chrome,<\/li>\n\n\n\n
- Edge,<\/li>\n\n\n\n
- Firefox,<\/li>\n\n\n\n
- Opera,<\/li>\n\n\n\n
- Safari.<\/li>\n<\/ul>\n\n\n\n
Also, solutions based on Electron have the experimental support for the JS\/TS versions.<\/p>\n\n\n\n
Projects using Playwright<\/strong><\/h3>\n\n\n\nMore and more projects are admitting\/bragging, that they use the tool in their UI tests. They are popular open-source initiatives, but also commercial solutions. A few examples below:<\/p>\n\n\n\n![\"Example](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-4-1-1024x274.png\")
Fig. 4 Example of a project using Playwright<\/a><\/figcaption><\/figure>\n\n\n\n![\"Example](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-6-1024x328.png\")
<\/a>Fig. 5 Example of a project using Playwright<\/a><\/figcaption><\/figure>\n\n\n\nPlaywright’s weaknesses<\/strong><\/h2>\n\n\n\nAs with any tool, there are times when a method does not work properly in a particular situation. As a Playwright user, I encountered problems only occasionally, but always managed to find a solution. However, I cannot exclude the possibility that in some specific case we may come across circumstances in which the solution will not be found. In that case, it is worth talking to the creators of the tool – they are available and are actively taking part in responding to the reports on GitHub.<\/p>\n\n\n\n
Let’s write the first test!<\/strong><\/h2>\n\n\n\nAfter a brief, theoretical introduction, let’s move on to writing the first automated test in this tool.<\/p>\n\n\n\n
Implementation of the automated test<\/strong><\/h3>\n\n\n\nThe test that I have prepared will consist of automating a simple test case for a store created for the test purpose. The test scenario looks like this:<\/p>\n\n\n\n
\n- Go to the website: seleniumsklep.pl<\/li>\n\n\n\n
- Click on the selected product based on its name.<\/li>\n\n\n\n
- Go to the cart and check if the price in the summary section matches the price in the product details.<\/li>\n<\/ol>\n\n\n\n
Go to Visual Studio and start by creating a package library project. This is the preferred type of project. The next step is to add the needed packages using NuGet packages. In our case:<\/p>\n\n\n\n
\n- Playwright,<\/li>\n\n\n\n
- Playwright Nunit.<\/li>\n<\/ul>\n\n\n\n
![\"Adding](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-7.png\")
<\/a>Fig. 6 Adding needed packages<\/figcaption><\/figure>\n\n\n\nPlaywright Nunit includes useful classes, which help the tools work together, e.g. in the context of running tests concurrently.<\/p>\n\n\n\n
The next step is to create the necessary catalogs, to organize the solution from the beginning.<\/p>\n\n\n\n![\"Creating](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-8.png\")
<\/a>Fig. 7 Creating catalogs<\/figcaption><\/figure>\n\n\n\nFirst, create the \u201cPages\u201d catalog, in which all page objects needed for the automated test will be placed. The next essential catalog, which needs to be added, is the \u201cTests\u201d catalog.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-9-1024x614.png\")
<\/a><\/figure>\n\n\n\nIn the BaseSetup class, there are two methods that will be used in all tests inheriting from this class. The \u201cSetup()\u201d method at the beginning initializes the Playwright object. It should be done in line 17. Before it, declare three fields that will be needed in further work.<\/p>\n\n\n\n
These fields are:<\/p>\n\n\n\n
\n- Playwright,<\/li>\n\n\n\n
- Browser,<\/li>\n\n\n\n
- Context.<\/li>\n<\/ul>\n\n\n\n
![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-10.png\")
<\/a><\/figure>\n\n\n\nIn the Setup() method, initialize the Browser field, which should be defined to set which browser will be used in the tests. If the Headless parameter is not entered, you will not be able to see the course of the tests – they would run without the graphical mode. It is a helpful option to avoid screen pop-ups with tests.<\/p>\n\n\n\n
Another thing that can be set here is the Channel. Playwright allows you to decide which version of Chrome will be used in our automated test. In a very simple way, you can define that you want to use e.g., Chrome beta or Edge in this version. It can be very useful for checking the operation of our application with the upcoming browser versions.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-11.png\")
<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-12.png\")
<\/a><\/figure>\n\n\n\nNext, we move on to defining the Context. What is Context? Initialize the Context field, which allows session handling of a given browser. What distinguishes Playwright is that it can handle more than one browser session at a time. Additionally, each screen has a “Focus”, so you if you want to perform an action, you do not have to switch between them.<\/p>\n\n\n\n
Also in the Browser object, you could immediately use the NewContextAsync() method, but Playwright’s creators recommend that you create a context every time. Each “Context” stores a separate cache and cookies.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-13.png\")
<\/a><\/figure>\n\n\n\nThe next step is defining the so-called Tracing. This method allows collecting logs while the automated test is running. We can trace:<\/p>\n\n\n\n
\n- Screenshots \u2013 creating a screenshot after each action,<\/li>\n\n\n\n
- Snapshots \u2013 collecting DOM contents after each action and collecting information from the network, so all requests and information from the console,<\/li>\n\n\n\n
- Sources \u2013 collecting information on which code line was activated in a particular moment.<\/li>\n<\/ul>\n\n\n\n
Automated test source code<\/strong><\/h2>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-14.png\")
<\/a><\/figure>\n\n\n\nMoving on to the automated test source code, begin with defining the method name. In this case it is<\/p>\n\n\n
\nEnterToShop_AddProductToBasket_CheckProductPriceInSummary()\n<\/pre><\/div>\n\n\nDefine \u201coption\u201d as a parameter, so that the name of the article chosen by the test can be passed dynamically. The \u201cTestCase\u201d attribute responds to it. Each next line in a form of the TestCase attribute with an argument, defines the next test case.<\/p>\n\n\n\n
Begin with defining the page object. It is responsible for controlling a single tab in the browser (associated with the context, of course).<\/p>\n\n\n\n
HomePage<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-15.png\")
<\/a><\/figure>\n\n\n\nDefine page object for the HomePage. The site itself contains a products of interest list.<\/p>\n\n\n\n![\"The](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-16-1024x524.png\")
<\/a>Fig. 8 The site with the products of interest<\/figcaption><\/figure>\n\n\n\nStart by creating a constructor for this class. The constructor will take the page object as a parameter, which contains methods to control actions related to this page. The next step is defining the ProductTitles fields with a selector corresponding to the name of each product.<\/p>\n\n\n\n
You still need a SelectDefineProduct method, which is responsible for clicking on a given product based on its name.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-17.png\")
<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-18.png\")
<\/a><\/figure>\n\n\n\n\n- QuerySelectorAllAsync method \u2013 allows downloading all of the elements on the basis of a given selector,<\/li>\n\n\n\n
- InnerText method \u2013 allows downloading the text from a given element,<\/li>\n\n\n\n
- ClickAsync method \u2013 clicks on an element of your choice.<\/li>\n<\/ul>\n\n\n\n
An interesting Playwright feature is that most of the used methods have additional uses, that expand the possibilities.<\/p>\n\n\n\n![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-19-1024x183.png\")
<\/a><\/figure>\n\n\n\nOne of them is the ClickAsync method. It allows defining how many times you want to click or determine the wait after the click.<\/p>\n\n\n\n
There are a lot of methods, which can be used on a given object. Here are some of them:<\/p>\n\n\n\n![\"Choice](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-20.png\")
<\/a>Fig. 9 Choice of methods available<\/figcaption><\/figure>\n\n\n\nWaits<\/strong><\/h2>\n\n\n\nAs I have mentioned, for most of the operations there is no need to add any additional waits. However, if the site is more complicated and adding the wait for an element is desired, you can use these methods.<\/p>\n\n\n\n![\"Methods](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-21.png\")
<\/a>Fig. 10 Methods of waits for an element<\/figcaption><\/figure>\n\n\n\nYou can wait for such a pop-up or a specific request shows up. This method is useful when switching between pages and you need to wait longer for the page to load.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-22-1024x508.png\")
<\/a><\/figure>\n\n\n\nBut back to the test code.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-23-1024x288.png\")
<\/a><\/figure>\n\n\n\nThe next step in the line 18 is to use the GoToAsync() method, which will go to the specified page. Save the page address in a separate class TestSettings.EnvUrl. Values such as the address to the environment are best stored in separate classes\/files. The GoToAsync method also has an ability to add an additional wait to load the page. The page address should be saved in the property of TestSettings class.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-24.png\")
<\/a><\/figure>\n\n\n\nAfter this step in the test, go to invoking the SelectDefineProduct(option) method. It is the one, that clicks on a specific product. Next, add the DetailsProdcutPage class, where I start by creating the fields needed for the methods, I will be using in the later stages of this test.<\/p>\n\n\n\n![\"The](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-25.png\")
<\/a>Fig. 11 The AddToBasketBtn field corresponds to the button on the page<\/figcaption><\/figure>\n\n\n\n![\"The](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-26.png\")
<\/a>Fig. 12 The ProceedtoCheckoutBtn corresponds to the button on the page<\/figcaption><\/figure>\n\n\n\n![\"The](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-27.png\")
<\/a>Fig. 13 The CurrentPrice field corresponds to the current price of the product, which is located on the product details page<\/figcaption><\/figure>\n\n\n\nNext, add a constructor that through the argument will take the page object, allowing to perform actions related to the page.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-28.png\")
<\/a><\/figure>\n\n\n\nDefine the AddToBasketBtn fields. To add and element in Playwright, use the _page.Locator(\u201cselector_name\u201d) method, which allows getting access to the element in Playwright on the basis of the specified selector. The next element, defined in the class, is the equivalent of the \u201cProceed to checkout\u201d button.<\/p>\n\n\n\n
The following field, needed for the test to work, is the \u201cCurrentPrice\u201d field. It allows retrieving the current price for the item.<\/p>\n\n\n\n
After defining all the fields required for this test, move on to defining two simple methods:<\/p>\n\n\n\n
\n- AddProductToCart() method contains the click on the add to cart button,<\/li>\n\n\n\n
- ProceedToCheckout() method is analogous to the click on the \u201cProceed to Checkout\u201d button.<\/li>\n<\/ul>\n\n\n\n
![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-29.png\")
<\/a><\/figure>\n\n\n\nDefine the GetCurrentProductPrice method, which is responsible for retrieving the current value of the price from the details of this product. You still need to add the ParseEuroToDouble method. It is a method that applies a simple so-called parsing, which, in this case, removes the \u20ac symbol from the text. In this case, it needs to be done, because the element is so defined in the HTML of the page.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-30.png\")
<\/a><\/figure>\n\n\n\nOf course, this is one way, you can approach it in many different manners. Another idea could be to use some regular expression to retrieve a numeric value from the text. The ParseEuroToDouble looks like this:<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-31-1024x201.png\")
<\/a><\/figure>\n\n\n\nGo back to the test source code. Invoke the methods, which allow adding product to the cart.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-32.png\")
<\/a><\/figure>\n\n\n\nIn the next line initialize the summaryCartPage object. It is an object representing the SummaryCartPage class.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-33.png\")
<\/a><\/figure>\n\n\n\nIn this class, apart from defining the constructor, add a field, which corresponds to the amount element on the cart summary.<\/p>\n\n\n\n![\"total](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-34.png\")
<\/a><\/figure>\n\n\n\nHere I also use the ParseEuroToDouble method, because they are comparable in this situation. After adding this method, return to the test code and compare the value of the currentTotalPrice variable with the productPrice. This comparison uses the FluentAssertations library, which is added via NuGet. It is an assertion library that allows more readable record, than the standard methos from the Assert class. Moving on to the test run. It can be done either using a dotnet test from the VS level or from the VS and R# level.<\/p>\n\n\n\n![\"Test](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-35.png\")
<\/a>Fig. 14 Test run<\/figcaption><\/figure>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-36.png\")
<\/a><\/figure>\n\n\n\nSummary<\/strong><\/h2>\n\n\n\nIn this article, I have showcased Playwright in practice and demonstrated a few fetures that may interest you and convince you to try working with this tool.<\/p>\n\n\n\n
In the next part, I would like to present how to use a helpful feature, which is Trace Viewer that allows to view the collected test logs. I will also present other interesting features of the tool.<\/p>\n\n\n\n
The code can be found in the prepared repository.<\/a><\/p>\n\n\n
If you have ever worked on automatic UI tests, you probably know what a problem it can be to handle waits for various dynamic elements located on the page. For Selenium WebDriver, it is recommended to use the so-called Explicit wait, which should solve this problem. However, finding the right wait is not that easy sometimes. It affects how much JavaScript and asynchronous operations are used on the site.<\/p>\n\n\n\n
Playwright uses the so-called auto-wait mechanism. What does it mean? In most situations, we do not need to add additional wait for elements, as Playwright itself waits the elements and actions by default. Of course, in a more complex situation, when we need to wait for an element, Playwright provides methods that can be used.<\/p>\n\n\n\n
Using different programming languages<\/strong><\/h3>\n\n\n\nCurrently, Playwright is supported for several popular programming languages. They are:<\/p>\n\n\n\n
\n- Java,<\/li>\n\n\n\n
- C#,<\/li>\n\n\n\n
- JS\/TS,<\/li>\n\n\n\n
- Python.<\/li>\n<\/ul>\n\n\n\n
As a result, the solution in different language versions is finding wider use on the market.<\/p>\n\n\n\n
Documentation<\/strong><\/h3>\n\n\n\nPlaywright\u2019s documentation is excellent. The use of methods is described on the basis of practical examples, which help to take advantage of the tool’s capabilities. Also, the documentation that appears while invoking a method in the IDE is often enough to make real use of it.<\/p>\n\n\n\n
Popularity of the tool<\/strong><\/h2>\n\n\n\nIt is worth noting, that the number of Playwright users is growing, as you can see in the graph below.<\/p>\n\n\n\n<\/a>Fig. 1 Ranking of framework usage in terms of the audience size<\/a><\/figcaption><\/figure>\n\n\n\nPlaywright, among the libraries used in tests, improved its score from 3% usage in the community in 2020 to 10% in 2021. This ranking relates to the Playwright JS\/TS version, however in my opinion, it is a noticeable popularity jump, that will be also likely noted for other language versions of the tool.<\/p>\n\n\n\n
Awareness of Playwright in the community has also improved, from 19% in 2020 to 34% a year later.<\/p>\n\n\n\n<\/a>Fig. 2 Ranking on tool knowledge and awareness<\/a><\/figcaption><\/figure>\n\n\n\nWhile choosing the tools, it is worth paying attention to their popularity and positive reception by the community, which is something that Playwright has already established for itself.<\/p>\n\n\n\n
New versions delivery frequency<\/strong><\/h3>\n\n\n\nFig. 3 Playwright \u2013 new versions delivery frequency<\/figcaption><\/figure>\n\n\n\nIt is undoubtedly worth mentioning how fast Playwright is evolving. Every two weeks or so, a new version is added with some kind of improvements (you can check the frequency of changes on GitHub).<\/p>\n\n\n\n
When choosing a potential tool, I always pay attention to the size of the community behind it. In this case, it is Microsoft and its employees, but also a growing number of engaged people outside the company.<\/p>\n\n\n\n
Browsers supported by Playwright<\/strong><\/h3>\n\n\n\nCurrently Playwright supports all of the most popular web browsers, such as:<\/p>\n\n\n\n
\n- Chrome,<\/li>\n\n\n\n
- Edge,<\/li>\n\n\n\n
- Firefox,<\/li>\n\n\n\n
- Opera,<\/li>\n\n\n\n
- Safari.<\/li>\n<\/ul>\n\n\n\n
Also, solutions based on Electron have the experimental support for the JS\/TS versions.<\/p>\n\n\n\n
Projects using Playwright<\/strong><\/h3>\n\n\n\nMore and more projects are admitting\/bragging, that they use the tool in their UI tests. They are popular open-source initiatives, but also commercial solutions. A few examples below:<\/p>\n\n\n\nFig. 4 Example of a project using Playwright<\/a><\/figcaption><\/figure>\n\n\n\n<\/a>Fig. 5 Example of a project using Playwright<\/a><\/figcaption><\/figure>\n\n\n\nPlaywright’s weaknesses<\/strong><\/h2>\n\n\n\nAs with any tool, there are times when a method does not work properly in a particular situation. As a Playwright user, I encountered problems only occasionally, but always managed to find a solution. However, I cannot exclude the possibility that in some specific case we may come across circumstances in which the solution will not be found. In that case, it is worth talking to the creators of the tool – they are available and are actively taking part in responding to the reports on GitHub.<\/p>\n\n\n\n
Let’s write the first test!<\/strong><\/h2>\n\n\n\nAfter a brief, theoretical introduction, let’s move on to writing the first automated test in this tool.<\/p>\n\n\n\n
Implementation of the automated test<\/strong><\/h3>\n\n\n\nThe test that I have prepared will consist of automating a simple test case for a store created for the test purpose. The test scenario looks like this:<\/p>\n\n\n\n
\n- Go to the website: seleniumsklep.pl<\/li>\n\n\n\n
- Click on the selected product based on its name.<\/li>\n\n\n\n
- Go to the cart and check if the price in the summary section matches the price in the product details.<\/li>\n<\/ol>\n\n\n\n
Go to Visual Studio and start by creating a package library project. This is the preferred type of project. The next step is to add the needed packages using NuGet packages. In our case:<\/p>\n\n\n\n
\n- Playwright,<\/li>\n\n\n\n
- Playwright Nunit.<\/li>\n<\/ul>\n\n\n\n
<\/a>Fig. 6 Adding needed packages<\/figcaption><\/figure>\n\n\n\nPlaywright Nunit includes useful classes, which help the tools work together, e.g. in the context of running tests concurrently.<\/p>\n\n\n\n
The next step is to create the necessary catalogs, to organize the solution from the beginning.<\/p>\n\n\n\n<\/a>Fig. 7 Creating catalogs<\/figcaption><\/figure>\n\n\n\nFirst, create the \u201cPages\u201d catalog, in which all page objects needed for the automated test will be placed. The next essential catalog, which needs to be added, is the \u201cTests\u201d catalog.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nIn the BaseSetup class, there are two methods that will be used in all tests inheriting from this class. The \u201cSetup()\u201d method at the beginning initializes the Playwright object. It should be done in line 17. Before it, declare three fields that will be needed in further work.<\/p>\n\n\n\n
These fields are:<\/p>\n\n\n\n
\n- Playwright,<\/li>\n\n\n\n
- Browser,<\/li>\n\n\n\n
- Context.<\/li>\n<\/ul>\n\n\n\n
<\/a><\/figure>\n\n\n\nIn the Setup() method, initialize the Browser field, which should be defined to set which browser will be used in the tests. If the Headless parameter is not entered, you will not be able to see the course of the tests – they would run without the graphical mode. It is a helpful option to avoid screen pop-ups with tests.<\/p>\n\n\n\n
Another thing that can be set here is the Channel. Playwright allows you to decide which version of Chrome will be used in our automated test. In a very simple way, you can define that you want to use e.g., Chrome beta or Edge in this version. It can be very useful for checking the operation of our application with the upcoming browser versions.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nNext, we move on to defining the Context. What is Context? Initialize the Context field, which allows session handling of a given browser. What distinguishes Playwright is that it can handle more than one browser session at a time. Additionally, each screen has a “Focus”, so you if you want to perform an action, you do not have to switch between them.<\/p>\n\n\n\n
Also in the Browser object, you could immediately use the NewContextAsync() method, but Playwright’s creators recommend that you create a context every time. Each “Context” stores a separate cache and cookies.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nThe next step is defining the so-called Tracing. This method allows collecting logs while the automated test is running. We can trace:<\/p>\n\n\n\n
\n- Screenshots \u2013 creating a screenshot after each action,<\/li>\n\n\n\n
- Snapshots \u2013 collecting DOM contents after each action and collecting information from the network, so all requests and information from the console,<\/li>\n\n\n\n
- Sources \u2013 collecting information on which code line was activated in a particular moment.<\/li>\n<\/ul>\n\n\n\n
Automated test source code<\/strong><\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nMoving on to the automated test source code, begin with defining the method name. In this case it is<\/p>\n\n\n
\nEnterToShop_AddProductToBasket_CheckProductPriceInSummary()\n<\/pre><\/div>\n\n\nDefine \u201coption\u201d as a parameter, so that the name of the article chosen by the test can be passed dynamically. The \u201cTestCase\u201d attribute responds to it. Each next line in a form of the TestCase attribute with an argument, defines the next test case.<\/p>\n\n\n\n
Begin with defining the page object. It is responsible for controlling a single tab in the browser (associated with the context, of course).<\/p>\n\n\n\n
HomePage<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nDefine page object for the HomePage. The site itself contains a products of interest list.<\/p>\n\n\n\n<\/a>Fig. 8 The site with the products of interest<\/figcaption><\/figure>\n\n\n\nStart by creating a constructor for this class. The constructor will take the page object as a parameter, which contains methods to control actions related to this page. The next step is defining the ProductTitles fields with a selector corresponding to the name of each product.<\/p>\n\n\n\n
You still need a SelectDefineProduct method, which is responsible for clicking on a given product based on its name.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n\n- QuerySelectorAllAsync method \u2013 allows downloading all of the elements on the basis of a given selector,<\/li>\n\n\n\n
- InnerText method \u2013 allows downloading the text from a given element,<\/li>\n\n\n\n
- ClickAsync method \u2013 clicks on an element of your choice.<\/li>\n<\/ul>\n\n\n\n
An interesting Playwright feature is that most of the used methods have additional uses, that expand the possibilities.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nOne of them is the ClickAsync method. It allows defining how many times you want to click or determine the wait after the click.<\/p>\n\n\n\n
There are a lot of methods, which can be used on a given object. Here are some of them:<\/p>\n\n\n\n<\/a>Fig. 9 Choice of methods available<\/figcaption><\/figure>\n\n\n\nWaits<\/strong><\/h2>\n\n\n\nAs I have mentioned, for most of the operations there is no need to add any additional waits. However, if the site is more complicated and adding the wait for an element is desired, you can use these methods.<\/p>\n\n\n\n<\/a>Fig. 10 Methods of waits for an element<\/figcaption><\/figure>\n\n\n\nYou can wait for such a pop-up or a specific request shows up. This method is useful when switching between pages and you need to wait longer for the page to load.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nBut back to the test code.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nThe next step in the line 18 is to use the GoToAsync() method, which will go to the specified page. Save the page address in a separate class TestSettings.EnvUrl. Values such as the address to the environment are best stored in separate classes\/files. The GoToAsync method also has an ability to add an additional wait to load the page. The page address should be saved in the property of TestSettings class.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nAfter this step in the test, go to invoking the SelectDefineProduct(option) method. It is the one, that clicks on a specific product. Next, add the DetailsProdcutPage class, where I start by creating the fields needed for the methods, I will be using in the later stages of this test.<\/p>\n\n\n\n<\/a>Fig. 11 The AddToBasketBtn field corresponds to the button on the page<\/figcaption><\/figure>\n\n\n\n<\/a>Fig. 12 The ProceedtoCheckoutBtn corresponds to the button on the page<\/figcaption><\/figure>\n\n\n\n<\/a>Fig. 13 The CurrentPrice field corresponds to the current price of the product, which is located on the product details page<\/figcaption><\/figure>\n\n\n\nNext, add a constructor that through the argument will take the page object, allowing to perform actions related to the page.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nDefine the AddToBasketBtn fields. To add and element in Playwright, use the _page.Locator(\u201cselector_name\u201d) method, which allows getting access to the element in Playwright on the basis of the specified selector. The next element, defined in the class, is the equivalent of the \u201cProceed to checkout\u201d button.<\/p>\n\n\n\n
The following field, needed for the test to work, is the \u201cCurrentPrice\u201d field. It allows retrieving the current price for the item.<\/p>\n\n\n\n
After defining all the fields required for this test, move on to defining two simple methods:<\/p>\n\n\n\n
\n- AddProductToCart() method contains the click on the add to cart button,<\/li>\n\n\n\n
- ProceedToCheckout() method is analogous to the click on the \u201cProceed to Checkout\u201d button.<\/li>\n<\/ul>\n\n\n\n
<\/a><\/figure>\n\n\n\nDefine the GetCurrentProductPrice method, which is responsible for retrieving the current value of the price from the details of this product. You still need to add the ParseEuroToDouble method. It is a method that applies a simple so-called parsing, which, in this case, removes the \u20ac symbol from the text. In this case, it needs to be done, because the element is so defined in the HTML of the page.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nOf course, this is one way, you can approach it in many different manners. Another idea could be to use some regular expression to retrieve a numeric value from the text. The ParseEuroToDouble looks like this:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nGo back to the test source code. Invoke the methods, which allow adding product to the cart.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nIn the next line initialize the summaryCartPage object. It is an object representing the SummaryCartPage class.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nIn this class, apart from defining the constructor, add a field, which corresponds to the amount element on the cart summary.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nHere I also use the ParseEuroToDouble method, because they are comparable in this situation. After adding this method, return to the test code and compare the value of the currentTotalPrice variable with the productPrice. This comparison uses the FluentAssertations library, which is added via NuGet. It is an assertion library that allows more readable record, than the standard methos from the Assert class. Moving on to the test run. It can be done either using a dotnet test from the VS level or from the VS and R# level.<\/p>\n\n\n\n<\/a>Fig. 14 Test run<\/figcaption><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nSummary<\/strong><\/h2>\n\n\n\nIn this article, I have showcased Playwright in practice and demonstrated a few fetures that may interest you and convince you to try working with this tool.<\/p>\n\n\n\n
In the next part, I would like to present how to use a helpful feature, which is Trace Viewer that allows to view the collected test logs. I will also present other interesting features of the tool.<\/p>\n\n\n\n
The code can be found in the prepared repository.<\/a><\/p>\n\n\n
As a result, the solution in different language versions is finding wider use on the market.<\/p>\n\n\n\n
Documentation<\/strong><\/h3>\n\n\n\nPlaywright\u2019s documentation is excellent. The use of methods is described on the basis of practical examples, which help to take advantage of the tool’s capabilities. Also, the documentation that appears while invoking a method in the IDE is often enough to make real use of it.<\/p>\n\n\n\n
Popularity of the tool<\/strong><\/h2>\n\n\n\nIt is worth noting, that the number of Playwright users is growing, as you can see in the graph below.<\/p>\n\n\n\n<\/a>Fig. 1 Ranking of framework usage in terms of the audience size<\/a><\/figcaption><\/figure>\n\n\n\nPlaywright, among the libraries used in tests, improved its score from 3% usage in the community in 2020 to 10% in 2021. This ranking relates to the Playwright JS\/TS version, however in my opinion, it is a noticeable popularity jump, that will be also likely noted for other language versions of the tool.<\/p>\n\n\n\n
Awareness of Playwright in the community has also improved, from 19% in 2020 to 34% a year later.<\/p>\n\n\n\n<\/a>Fig. 2 Ranking on tool knowledge and awareness<\/a><\/figcaption><\/figure>\n\n\n\nWhile choosing the tools, it is worth paying attention to their popularity and positive reception by the community, which is something that Playwright has already established for itself.<\/p>\n\n\n\n
New versions delivery frequency<\/strong><\/h3>\n\n\n\nFig. 3 Playwright \u2013 new versions delivery frequency<\/figcaption><\/figure>\n\n\n\nIt is undoubtedly worth mentioning how fast Playwright is evolving. Every two weeks or so, a new version is added with some kind of improvements (you can check the frequency of changes on GitHub).<\/p>\n\n\n\n
When choosing a potential tool, I always pay attention to the size of the community behind it. In this case, it is Microsoft and its employees, but also a growing number of engaged people outside the company.<\/p>\n\n\n\n
Browsers supported by Playwright<\/strong><\/h3>\n\n\n\nCurrently Playwright supports all of the most popular web browsers, such as:<\/p>\n\n\n\n
\n- Chrome,<\/li>\n\n\n\n
- Edge,<\/li>\n\n\n\n
- Firefox,<\/li>\n\n\n\n
- Opera,<\/li>\n\n\n\n
- Safari.<\/li>\n<\/ul>\n\n\n\n
Also, solutions based on Electron have the experimental support for the JS\/TS versions.<\/p>\n\n\n\n
Projects using Playwright<\/strong><\/h3>\n\n\n\nMore and more projects are admitting\/bragging, that they use the tool in their UI tests. They are popular open-source initiatives, but also commercial solutions. A few examples below:<\/p>\n\n\n\nFig. 4 Example of a project using Playwright<\/a><\/figcaption><\/figure>\n\n\n\n<\/a>Fig. 5 Example of a project using Playwright<\/a><\/figcaption><\/figure>\n\n\n\nPlaywright’s weaknesses<\/strong><\/h2>\n\n\n\nAs with any tool, there are times when a method does not work properly in a particular situation. As a Playwright user, I encountered problems only occasionally, but always managed to find a solution. However, I cannot exclude the possibility that in some specific case we may come across circumstances in which the solution will not be found. In that case, it is worth talking to the creators of the tool – they are available and are actively taking part in responding to the reports on GitHub.<\/p>\n\n\n\n
Let’s write the first test!<\/strong><\/h2>\n\n\n\nAfter a brief, theoretical introduction, let’s move on to writing the first automated test in this tool.<\/p>\n\n\n\n
Implementation of the automated test<\/strong><\/h3>\n\n\n\nThe test that I have prepared will consist of automating a simple test case for a store created for the test purpose. The test scenario looks like this:<\/p>\n\n\n\n
\n- Go to the website: seleniumsklep.pl<\/li>\n\n\n\n
- Click on the selected product based on its name.<\/li>\n\n\n\n
- Go to the cart and check if the price in the summary section matches the price in the product details.<\/li>\n<\/ol>\n\n\n\n
Go to Visual Studio and start by creating a package library project. This is the preferred type of project. The next step is to add the needed packages using NuGet packages. In our case:<\/p>\n\n\n\n
\n- Playwright,<\/li>\n\n\n\n
- Playwright Nunit.<\/li>\n<\/ul>\n\n\n\n
<\/a>Fig. 6 Adding needed packages<\/figcaption><\/figure>\n\n\n\nPlaywright Nunit includes useful classes, which help the tools work together, e.g. in the context of running tests concurrently.<\/p>\n\n\n\n
The next step is to create the necessary catalogs, to organize the solution from the beginning.<\/p>\n\n\n\n<\/a>Fig. 7 Creating catalogs<\/figcaption><\/figure>\n\n\n\nFirst, create the \u201cPages\u201d catalog, in which all page objects needed for the automated test will be placed. The next essential catalog, which needs to be added, is the \u201cTests\u201d catalog.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nIn the BaseSetup class, there are two methods that will be used in all tests inheriting from this class. The \u201cSetup()\u201d method at the beginning initializes the Playwright object. It should be done in line 17. Before it, declare three fields that will be needed in further work.<\/p>\n\n\n\n
These fields are:<\/p>\n\n\n\n
\n- Playwright,<\/li>\n\n\n\n
- Browser,<\/li>\n\n\n\n
- Context.<\/li>\n<\/ul>\n\n\n\n
<\/a><\/figure>\n\n\n\nIn the Setup() method, initialize the Browser field, which should be defined to set which browser will be used in the tests. If the Headless parameter is not entered, you will not be able to see the course of the tests – they would run without the graphical mode. It is a helpful option to avoid screen pop-ups with tests.<\/p>\n\n\n\n
Another thing that can be set here is the Channel. Playwright allows you to decide which version of Chrome will be used in our automated test. In a very simple way, you can define that you want to use e.g., Chrome beta or Edge in this version. It can be very useful for checking the operation of our application with the upcoming browser versions.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nNext, we move on to defining the Context. What is Context? Initialize the Context field, which allows session handling of a given browser. What distinguishes Playwright is that it can handle more than one browser session at a time. Additionally, each screen has a “Focus”, so you if you want to perform an action, you do not have to switch between them.<\/p>\n\n\n\n
Also in the Browser object, you could immediately use the NewContextAsync() method, but Playwright’s creators recommend that you create a context every time. Each “Context” stores a separate cache and cookies.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nThe next step is defining the so-called Tracing. This method allows collecting logs while the automated test is running. We can trace:<\/p>\n\n\n\n
\n- Screenshots \u2013 creating a screenshot after each action,<\/li>\n\n\n\n
- Snapshots \u2013 collecting DOM contents after each action and collecting information from the network, so all requests and information from the console,<\/li>\n\n\n\n
- Sources \u2013 collecting information on which code line was activated in a particular moment.<\/li>\n<\/ul>\n\n\n\n
Automated test source code<\/strong><\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nMoving on to the automated test source code, begin with defining the method name. In this case it is<\/p>\n\n\n
\nEnterToShop_AddProductToBasket_CheckProductPriceInSummary()\n<\/pre><\/div>\n\n\nDefine \u201coption\u201d as a parameter, so that the name of the article chosen by the test can be passed dynamically. The \u201cTestCase\u201d attribute responds to it. Each next line in a form of the TestCase attribute with an argument, defines the next test case.<\/p>\n\n\n\n
Begin with defining the page object. It is responsible for controlling a single tab in the browser (associated with the context, of course).<\/p>\n\n\n\n
HomePage<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nDefine page object for the HomePage. The site itself contains a products of interest list.<\/p>\n\n\n\n<\/a>Fig. 8 The site with the products of interest<\/figcaption><\/figure>\n\n\n\nStart by creating a constructor for this class. The constructor will take the page object as a parameter, which contains methods to control actions related to this page. The next step is defining the ProductTitles fields with a selector corresponding to the name of each product.<\/p>\n\n\n\n
You still need a SelectDefineProduct method, which is responsible for clicking on a given product based on its name.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n\n- QuerySelectorAllAsync method \u2013 allows downloading all of the elements on the basis of a given selector,<\/li>\n\n\n\n
- InnerText method \u2013 allows downloading the text from a given element,<\/li>\n\n\n\n
- ClickAsync method \u2013 clicks on an element of your choice.<\/li>\n<\/ul>\n\n\n\n
An interesting Playwright feature is that most of the used methods have additional uses, that expand the possibilities.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nOne of them is the ClickAsync method. It allows defining how many times you want to click or determine the wait after the click.<\/p>\n\n\n\n
There are a lot of methods, which can be used on a given object. Here are some of them:<\/p>\n\n\n\n<\/a>Fig. 9 Choice of methods available<\/figcaption><\/figure>\n\n\n\nWaits<\/strong><\/h2>\n\n\n\nAs I have mentioned, for most of the operations there is no need to add any additional waits. However, if the site is more complicated and adding the wait for an element is desired, you can use these methods.<\/p>\n\n\n\n<\/a>Fig. 10 Methods of waits for an element<\/figcaption><\/figure>\n\n\n\nYou can wait for such a pop-up or a specific request shows up. This method is useful when switching between pages and you need to wait longer for the page to load.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nBut back to the test code.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nThe next step in the line 18 is to use the GoToAsync() method, which will go to the specified page. Save the page address in a separate class TestSettings.EnvUrl. Values such as the address to the environment are best stored in separate classes\/files. The GoToAsync method also has an ability to add an additional wait to load the page. The page address should be saved in the property of TestSettings class.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nAfter this step in the test, go to invoking the SelectDefineProduct(option) method. It is the one, that clicks on a specific product. Next, add the DetailsProdcutPage class, where I start by creating the fields needed for the methods, I will be using in the later stages of this test.<\/p>\n\n\n\n<\/a>Fig. 11 The AddToBasketBtn field corresponds to the button on the page<\/figcaption><\/figure>\n\n\n\n<\/a>Fig. 12 The ProceedtoCheckoutBtn corresponds to the button on the page<\/figcaption><\/figure>\n\n\n\n<\/a>Fig. 13 The CurrentPrice field corresponds to the current price of the product, which is located on the product details page<\/figcaption><\/figure>\n\n\n\nNext, add a constructor that through the argument will take the page object, allowing to perform actions related to the page.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nDefine the AddToBasketBtn fields. To add and element in Playwright, use the _page.Locator(\u201cselector_name\u201d) method, which allows getting access to the element in Playwright on the basis of the specified selector. The next element, defined in the class, is the equivalent of the \u201cProceed to checkout\u201d button.<\/p>\n\n\n\n
The following field, needed for the test to work, is the \u201cCurrentPrice\u201d field. It allows retrieving the current price for the item.<\/p>\n\n\n\n
After defining all the fields required for this test, move on to defining two simple methods:<\/p>\n\n\n\n
\n- AddProductToCart() method contains the click on the add to cart button,<\/li>\n\n\n\n
- ProceedToCheckout() method is analogous to the click on the \u201cProceed to Checkout\u201d button.<\/li>\n<\/ul>\n\n\n\n
<\/a><\/figure>\n\n\n\nDefine the GetCurrentProductPrice method, which is responsible for retrieving the current value of the price from the details of this product. You still need to add the ParseEuroToDouble method. It is a method that applies a simple so-called parsing, which, in this case, removes the \u20ac symbol from the text. In this case, it needs to be done, because the element is so defined in the HTML of the page.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nOf course, this is one way, you can approach it in many different manners. Another idea could be to use some regular expression to retrieve a numeric value from the text. The ParseEuroToDouble looks like this:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nGo back to the test source code. Invoke the methods, which allow adding product to the cart.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nIn the next line initialize the summaryCartPage object. It is an object representing the SummaryCartPage class.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nIn this class, apart from defining the constructor, add a field, which corresponds to the amount element on the cart summary.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nHere I also use the ParseEuroToDouble method, because they are comparable in this situation. After adding this method, return to the test code and compare the value of the currentTotalPrice variable with the productPrice. This comparison uses the FluentAssertations library, which is added via NuGet. It is an assertion library that allows more readable record, than the standard methos from the Assert class. Moving on to the test run. It can be done either using a dotnet test from the VS level or from the VS and R# level.<\/p>\n\n\n\n<\/a>Fig. 14 Test run<\/figcaption><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nSummary<\/strong><\/h2>\n\n\n\nIn this article, I have showcased Playwright in practice and demonstrated a few fetures that may interest you and convince you to try working with this tool.<\/p>\n\n\n\n
In the next part, I would like to present how to use a helpful feature, which is Trace Viewer that allows to view the collected test logs. I will also present other interesting features of the tool.<\/p>\n\n\n\n
The code can be found in the prepared repository.<\/a><\/p>\n\n\n
It is worth noting, that the number of Playwright users is growing, as you can see in the graph below.<\/p>\n\n\n\n Playwright, among the libraries used in tests, improved its score from 3% usage in the community in 2020 to 10% in 2021. This ranking relates to the Playwright JS\/TS version, however in my opinion, it is a noticeable popularity jump, that will be also likely noted for other language versions of the tool.<\/p>\n\n\n\n Awareness of Playwright in the community has also improved, from 19% in 2020 to 34% a year later.<\/p>\n\n\n\n While choosing the tools, it is worth paying attention to their popularity and positive reception by the community, which is something that Playwright has already established for itself.<\/p>\n\n\n\n It is undoubtedly worth mentioning how fast Playwright is evolving. Every two weeks or so, a new version is added with some kind of improvements (you can check the frequency of changes on GitHub).<\/p>\n\n\n\n When choosing a potential tool, I always pay attention to the size of the community behind it. In this case, it is Microsoft and its employees, but also a growing number of engaged people outside the company.<\/p>\n\n\n\n Currently Playwright supports all of the most popular web browsers, such as:<\/p>\n\n\n\n Also, solutions based on Electron have the experimental support for the JS\/TS versions.<\/p>\n\n\n\n More and more projects are admitting\/bragging, that they use the tool in their UI tests. They are popular open-source initiatives, but also commercial solutions. A few examples below:<\/p>\n\n\n\n As with any tool, there are times when a method does not work properly in a particular situation. As a Playwright user, I encountered problems only occasionally, but always managed to find a solution. However, I cannot exclude the possibility that in some specific case we may come across circumstances in which the solution will not be found. In that case, it is worth talking to the creators of the tool – they are available and are actively taking part in responding to the reports on GitHub.<\/p>\n\n\n\n After a brief, theoretical introduction, let’s move on to writing the first automated test in this tool.<\/p>\n\n\n\n The test that I have prepared will consist of automating a simple test case for a store created for the test purpose. The test scenario looks like this:<\/p>\n\n\n\n Go to Visual Studio and start by creating a package library project. This is the preferred type of project. The next step is to add the needed packages using NuGet packages. In our case:<\/p>\n\n\n\n Playwright Nunit includes useful classes, which help the tools work together, e.g. in the context of running tests concurrently.<\/p>\n\n\n\n The next step is to create the necessary catalogs, to organize the solution from the beginning.<\/p>\n\n\n\n First, create the \u201cPages\u201d catalog, in which all page objects needed for the automated test will be placed. The next essential catalog, which needs to be added, is the \u201cTests\u201d catalog.<\/p>\n\n\n\n In the BaseSetup class, there are two methods that will be used in all tests inheriting from this class. The \u201cSetup()\u201d method at the beginning initializes the Playwright object. It should be done in line 17. Before it, declare three fields that will be needed in further work.<\/p>\n\n\n\n These fields are:<\/p>\n\n\n\n In the Setup() method, initialize the Browser field, which should be defined to set which browser will be used in the tests. If the Headless parameter is not entered, you will not be able to see the course of the tests – they would run without the graphical mode. It is a helpful option to avoid screen pop-ups with tests.<\/p>\n\n\n\n Another thing that can be set here is the Channel. Playwright allows you to decide which version of Chrome will be used in our automated test. In a very simple way, you can define that you want to use e.g., Chrome beta or Edge in this version. It can be very useful for checking the operation of our application with the upcoming browser versions.<\/p>\n\n\n\n <\/p>\n\n\n\n Next, we move on to defining the Context. What is Context? Initialize the Context field, which allows session handling of a given browser. What distinguishes Playwright is that it can handle more than one browser session at a time. Additionally, each screen has a “Focus”, so you if you want to perform an action, you do not have to switch between them.<\/p>\n\n\n\n Also in the Browser object, you could immediately use the NewContextAsync() method, but Playwright’s creators recommend that you create a context every time. Each “Context” stores a separate cache and cookies.<\/p>\n\n\n\n The next step is defining the so-called Tracing. This method allows collecting logs while the automated test is running. We can trace:<\/p>\n\n\n\n Moving on to the automated test source code, begin with defining the method name. In this case it is<\/p>\n\n\n Define \u201coption\u201d as a parameter, so that the name of the article chosen by the test can be passed dynamically. The \u201cTestCase\u201d attribute responds to it. Each next line in a form of the TestCase attribute with an argument, defines the next test case.<\/p>\n\n\n\n Begin with defining the page object. It is responsible for controlling a single tab in the browser (associated with the context, of course).<\/p>\n\n\n\n HomePage<\/p>\n\n\n\n Define page object for the HomePage. The site itself contains a products of interest list.<\/p>\n\n\n\n Start by creating a constructor for this class. The constructor will take the page object as a parameter, which contains methods to control actions related to this page. The next step is defining the ProductTitles fields with a selector corresponding to the name of each product.<\/p>\n\n\n\n You still need a SelectDefineProduct method, which is responsible for clicking on a given product based on its name.<\/p>\n\n\n\n <\/p>\n\n\n\n An interesting Playwright feature is that most of the used methods have additional uses, that expand the possibilities.<\/p>\n\n\n\n One of them is the ClickAsync method. It allows defining how many times you want to click or determine the wait after the click.<\/p>\n\n\n\n There are a lot of methods, which can be used on a given object. Here are some of them:<\/p>\n\n\n\n As I have mentioned, for most of the operations there is no need to add any additional waits. However, if the site is more complicated and adding the wait for an element is desired, you can use these methods.<\/p>\n\n\n\n You can wait for such a pop-up or a specific request shows up. This method is useful when switching between pages and you need to wait longer for the page to load.<\/p>\n\n\n\n But back to the test code.<\/p>\n\n\n\n The next step in the line 18 is to use the GoToAsync() method, which will go to the specified page. Save the page address in a separate class TestSettings.EnvUrl. Values such as the address to the environment are best stored in separate classes\/files. The GoToAsync method also has an ability to add an additional wait to load the page. The page address should be saved in the property of TestSettings class.<\/p>\n\n\n\n After this step in the test, go to invoking the SelectDefineProduct(option) method. It is the one, that clicks on a specific product. Next, add the DetailsProdcutPage class, where I start by creating the fields needed for the methods, I will be using in the later stages of this test.<\/p>\n\n\n\n Next, add a constructor that through the argument will take the page object, allowing to perform actions related to the page.<\/p>\n\n\n\n Define the AddToBasketBtn fields. To add and element in Playwright, use the _page.Locator(\u201cselector_name\u201d) method, which allows getting access to the element in Playwright on the basis of the specified selector. The next element, defined in the class, is the equivalent of the \u201cProceed to checkout\u201d button.<\/p>\n\n\n\n The following field, needed for the test to work, is the \u201cCurrentPrice\u201d field. It allows retrieving the current price for the item.<\/p>\n\n\n\n After defining all the fields required for this test, move on to defining two simple methods:<\/p>\n\n\n\n Define the GetCurrentProductPrice method, which is responsible for retrieving the current value of the price from the details of this product. You still need to add the ParseEuroToDouble method. It is a method that applies a simple so-called parsing, which, in this case, removes the \u20ac symbol from the text. In this case, it needs to be done, because the element is so defined in the HTML of the page.<\/p>\n\n\n\n Of course, this is one way, you can approach it in many different manners. Another idea could be to use some regular expression to retrieve a numeric value from the text. The ParseEuroToDouble looks like this:<\/p>\n\n\n\n Go back to the test source code. Invoke the methods, which allow adding product to the cart.<\/p>\n\n\n\n In the next line initialize the summaryCartPage object. It is an object representing the SummaryCartPage class.<\/p>\n\n\n\n In this class, apart from defining the constructor, add a field, which corresponds to the amount element on the cart summary.<\/p>\n\n\n\n Here I also use the ParseEuroToDouble method, because they are comparable in this situation. After adding this method, return to the test code and compare the value of the currentTotalPrice variable with the productPrice. This comparison uses the FluentAssertations library, which is added via NuGet. It is an assertion library that allows more readable record, than the standard methos from the Assert class. Moving on to the test run. It can be done either using a dotnet test from the VS level or from the VS and R# level.<\/p>\n\n\n\n In this article, I have showcased Playwright in practice and demonstrated a few fetures that may interest you and convince you to try working with this tool.<\/p>\n\n\n\n In the next part, I would like to present how to use a helpful feature, which is Trace Viewer that allows to view the collected test logs. I will also present other interesting features of the tool.<\/p>\n\n\n\n The code can be found in the prepared repository.<\/a><\/p>\n\n\n![\"Ranking](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/01\/Ryc.-1-2.png\")
<\/a><\/a>New versions delivery frequency<\/strong><\/h3>\n\n\n\n
Browsers supported by Playwright<\/strong><\/h3>\n\n\n\n
\n
Projects using Playwright<\/strong><\/h3>\n\n\n\n
<\/a>Playwright’s weaknesses<\/strong><\/h2>\n\n\n\n
Let’s write the first test!<\/strong><\/h2>\n\n\n\n
Implementation of the automated test<\/strong><\/h3>\n\n\n\n
\n
\n
<\/a><\/a><\/a><\/figure>\n\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n\n
Automated test source code<\/strong><\/h2>\n\n\n\n
<\/a><\/figure>\n\n\n\n\nEnterToShop_AddProductToBasket_CheckProductPriceInSummary()\n<\/pre><\/div>\n\n\n
<\/a><\/figure>\n\n\n\n<\/a><\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a>Waits<\/strong><\/h2>\n\n\n\n
<\/a><\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/a><\/a><\/a><\/figure>\n\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/a><\/figure>\n\n\n\nSummary<\/strong><\/h2>\n\n\n\n