APEX e2e Testing automation with Jest & Puppeteer #2

As we saw in the previous entry , and as we shall see later on, we actually don’t need to see tests running on your screen like that, but only when you’re setting up your test cases.

But I’m getting ahead of myself. First and foremost, an overview of what you’ll need.

• Jest: An easy-to-use fully featured JavaScript testing framework. It has a wide range of features one would need; like a launcher, an assertion library, snapshots, a nice display of tests results(progress, coverage)… Even though we’re using it in for e2e testing purposes, it’s also a perfect tool for unit-testing.
• Puppeteer: In addition to Jest, you need a browser controller to simulate your users interactions! That’s where puppeteer comes in. I use it here to control chromium.

Quick setup

• Let’s walk through a quick setup to get us started.
• Node installation is a prerequisite. You can get the latest LTS version here. After installation, you should be able to run below 2 commands (for checking the version of node and NPM)and get results.

• Setup a separate workspace. It is easier with a modern IDEs, like VS Code. Run below command to initialize the package. It will take you through some questions and after you’re done, you’ll find that I has generated the “package.json” file for you. You need to make sure that when the question test is asked, the answer needs to be Jestnpm init
• Run below command to install Jest (for now)

npm install --save-dev Jest

• Run below command to install Puppeteer. Note that this will take some time as it will install it together with the latest version of chromium (~170mb)

npm install --save-dev puppeteer

• Let us create the first file to test only the login page. Let us name it 01-login.test.js. Because of the file extension, it will automatically be picked up when we run the test.
• Write the following code in the file:

Few notes on the above:

1. We first import Puppeteer on line 1.
2. We’re changing, on line 2, the 5 seconds default timeout for Jest to complete our test case.
3. I already created an APEX test user to login in and I replaced line 5 and 6 with the corresponding credentials.
4. I’m using Oracle APEX Version 20.1, with the new friendly-url feature. I enabled it for the Sample Database Application and the result is on line 7.
5. I made sure, in the APEX Page properties, that the “Sign In” button of the login page has P101_LOGIN_APP as static ID, so as for Puppeteer to easily and identify the selector.
6. Put the right selectors, which Puppeteer is going to use for clicking(line 8–10)
7. The whole block (line 4–30) represents one Jest test case and we called it “login screen”(line 4), but there’s freedom on how to call them. The test case calls a function. Since most puppeteer functions return promises, we’re going to use the async/await syntax for readability. Then, Jest is going to call an async function.
8. Puppeteer will launch a browser with some options(line 11–16), create a new page in the browser instance(line 17), go to the login screen URL (line 18), type in the username(line 19–20), the password(line 21–22).
9. At the end of the day all we want to know is if the login screen works. We’re going to “expect” that the homepage URL contains the string “home”(line 28). Puppeteer will wait for navigation (after page redirection when clicking on the “sign in” button: line 23–26) and grab the URL of the next page(line 27). Note that I made sure the alias of the home page is “home” in APEX page properties.
10. Once all is done, close the browser to end the test(line 29).

Now to run this, we run simple command in our terminal: npm test This command will scan your folder for all files with the extension ‘.test.js’ and run tests. In our case, a browser will automatically be opened and login and automatically be closed.

Here, the successful results I’ll get in my terminal. It tells me that I successfully ran my one test suite and one test case, how many snapshots and the time it took to run it.

With the report printed out nicely in my terminal, we understand that we don’t actually need to run a full browser for this. We can just run it in the background and see the results in the terminal.

We shall see in the next entry, how to do that, write multiple tests to place an order, and create a customer.

In the series:

1. APEX e2e Testing automation with Jest & Puppeteer #1
2. APEX e2e Testing automation with Jest & Puppeteer #3
3. APEX e2e Testing automation with Jest & Puppeteer #4