E2E Test using Puppeteer

We reformed the GNB UI of our service. Because the GNB is loaded in most of our services, deployment of GNB can affect stability of the services. To reduce the risk, I made an E2E test tool using puppeteer. The test mimics user’s order flow. If it goes well from the product search step to the order step, it is evaluated that it passed the test. I wrote this article to share my experiences. The codes are at the bottom of this article.

Is it possible to test Internet Explorer? No!

Not only puppeteer, but most tools are also not testable to IE. Because they depend on the driver or SDK of the target browser. So puppeteer and cypress only work on Chromium-based browsers. This is the significant shortcoming in South-Korea where IE still has 10% browser share.

So if I should make an E2E test next time, I will use Testcafe that can test IE. It has a different architecture that is called Client-Server. They don’t use the driver or SDK to control browsers. They don’t control browsers but use a reverse proxy server to inject testing scripts inside the tested webpage. The injected script emulates user action based on the test code written by you. Then, the result of tests run by the injected script is sent to the server. With this principle, they are free from the browser and environment to be tested. Genius!!!

Experiences on using Puppeteer

1. Set the headless option to false: If you set the value to true, the browser becomes a background process. Then, the process has low priority of CPU scheduling. It makes the result of UI testing inaccurate. So I recommend setting the value to true.
2. Should add signing in: The browser instance made by puppeteer.launch has reset states. So if you want to test functions that need authentication, you should add signing in.
3. waitFor : Like page.waitForNavigation() and page.waitForSelector(selector), there are many API with waitFor*. They are waiting api to test asynchronous web environment. Use async/await for the waiting.