My review for the Craft Conference 2022
I am Omar. A certified software developer and a designer. I have taken many programming courses and I am experienced in many popular programming languages including Python, Java, and JavaScript.
Craft Conference 2022 was one of the conferences I enjoyed where I learned many things, one of my favourite talks was from Debbie O'Brien, who works [at] Microsoft as a Senior Program Manager where she talked about Testing Web Applications with Playwright and how to make automatic easy tests in no time without making it hard on you, taking a long time even to learn how and build, and so much on, so that's Playwright.
Testing Web Applications with Playwright - Debbie O'Brien, Microsoft
Debbie O'Brien from Microsoft spoke about Java, Dot Net and Python. Testing is hard, testing takes time to learn and to write, and time is money. As developers, we want to test. We know we should but we don't have time. So how can we get more developers to do testing? We can create better tools. Let me introduce you to Playwright - Reliable end-to-end cross-browser testing for modern web apps, by Microsoft and fully open source. Playwright's Codegen generates tests for you in JavaScript, TypeScript, Dot Net, Java or Python. Now you have no excuses. It's time to use Playwright.
I didn't know anything about Playwright. I learned that it's okay not to test your application because it's hard, takes time to build and learn, and takes a long time. So that's why Playwright is the solution to test the web applications. It's easy with Playwright to test web applications, it is an end-to-end testing tool and it runs on almost all browsers, Chromium, and more.
I learned Playwright it's better because it works with any browser, any platform, one API, fast execution and more.
How I can get started with Playwright is simple is just as follows:
# Run from your project's root directory
npm init playwright@latest
# Or create a new project
npm init playwright@latest new-project
Also, the thing that I liked is that there is a VS Code extension for Playwright which has a UI so it would be easy to use 😎.
I will be also writing a summary of how to make your first test. After the installation in your browser, just by clicking F1, you will get a package.json, playwright.config.ts, and Tests folder with an example test file. If you don't have an existing project, you can use the To-Do template!
What's also great is Codegen which generates tests by recording your actions. You can run it using npx playwright codegen which then will open 2 windows with a browser window and the tests, also the tests support multiple languages, including Java, JavaScript, Python, and C#.
What about running tests? You can run all tests, a set of tests, or a single test. Or you can even make tests run in parallel and it's super fast 🚀!
You can run tests in Headless or Headed:
# headless
npx playwright test
# headed
npx playwright test --headed
What about breaking tests? It's recommended to break tests to check if they are working. As an example, I was using a locator in a t-shirt online store, there is (Women, Men, and Children) if you try to locate Men, Playwright isn't sure what you want to exactly approach, because also the word Men is in Women because it's so strict, so we need to mention exactly Men, no any letter missing and no any letter is extra!
Locators are a way to find element(s) on the page at any moment with built-in auto-waiting and retry-ability, they are like the pins on a map. Here is how to make/use a locator:
Running debug mode:
npx playwright test --debug
If you would like to have better errors details, this is for the terminal, if you are using the extension in VS Code, it's as follows:
Just make a breakpoint where you want to stop your code and click on the green check mark and click Debug Test.
We can show reports using the command:
npx playwright show-report
This is an report example in Chromium:
Let's talk about tracing files, if you want to record a trace for each test, normally it's on if it's a broken test, but you can manually turn it on by mentioning the following:
trace: 'on'
What it does is if you go to your report, at the bottom you will get an image, a trace .zip file.
Or you can just click and it'll open it up.
My review's summary
To pack up, Playwright is an amazing way to test your applications in no time seamlessly as it supports many programming languages including Java, JavaScript, Python, and C#. Also, there is a Visual Studio Code extension for Playwright! You can make a breakpoint and run your test in debug mode.
I also tried to use it with CodeGuard which is my submission for the Hashnode X Linode Hackathon and I found some bugs, errors, etc. which I fixed in release version 1.1 which has been just released yesterday, and announced today on the submission article. Since then, my project CodeGuard for the Hashnode X Linode Hackathon got better because I used Playwright to test my application/project CodeGuard and find errors which sometimes are "behind the scenes" which is called the back-end!
I also benefited a lot from breaking my tests by making breakpoints and running in debug mode. And I had been using Playwright since then in all my projects, even if it's a personal one, but why not if it's all automated 🚀😎. You can use Playwright with any browser which is great and even get a trace in a .zip file!
I learned a lot and it was really useful I hope to continue using Playwright!
Special thanks 🚀
Special thanks to Craft Conf for providing me with this complimentary ticket to attend the conference, I learned a lot!
Also thanks to you Miki Szeles for providing me with this awesome opportunity!