APEX e2e Testing Automation With Jest & Puppeteer #3
In this installment we’re going to kick it up a notch and write couple more tests. In the previous article, we saw how we can setup our environment and write the first test: Log in the application. We also saw a bit of puppeteer & Jest syntax to do that. Our agenda now is to write more tests and what we’d want to achieve is
- Confirm that Login is successful
- Navigate to the “Orders” page and confirm
- Click on the “Place Order” button and open the modal page
- Verify that the modal dialog is really open
Before diving into the code, we have to prepare the APEX app for this by:
- Making sure that every page (including modal pages) we’re going to test has an alias. I think it is more readable when we have aliases in our test suites rather than page IDs.
- Making sure that every button we’re going to click has a static ID (it is even better to come up with a naming convention).
Now, back to the code. Let me first paste it here, then a few comments on what it means afterwards:
Notes on the above:
We made few changes on the login test:
- The page, browser and homepage URL are now global variables(Line 3). Why? because we need these to be passed around in all our tests.
- “beforeAll” is introduced here as a method that runs before any tests in this file. We need to instanciate a browser and a page to be used in our test cases before running them(Line 5–15)
After login is done, we’re going to redirect to the orders page. And we’re going to do this simply by replacing aliases in the home page URL (Line 36), then the way to make sure that we’re on the right page, we’re expecting the page title to be “Orders”. We did that by evaluating the content of class “.t-Breadcrumb-label”
After this we then write 2 tests which are related. And we use the “describe” method to group these 2 tests in a block. Now, we note few things
- We first click at the “Place Order” button (Line 45)
- The modal page opened is nothing but an inline frame(Line 47) and we use contentFrame() to retrieve its nodes (Line 48)
- After that we get the title(Line 49) and the URL(Line 50) properties of the Frame object.
- Expect our title to be ‘Sample Database Application — Identify Customer’ (Line 49) as our first test
- Expect the modal page alias(“placeorder_identifycustomer”) to be reflected in the URL(Line 54) as our second test in our groupped tests.
We then close our browser upon test completion (Line 55).
After this, we issue the same command to run the tests: npm test and the result summary will look like below. If configured correctly, it will show you that all your 4 tests in your test suite passed.
Remarks:
I think by now, if you’ve been following, you’ll now go ahead and build the complete test suite to place an order. We’ll just need to make sure that since most of the navigation from here-on-out will be in the modal page, we should keep making use of the frame method. For example, here is how I wrote the test for step 2 of making an order:
What I am doing here is to:
- Use “describe” again to group 2 related tests (Line 1)
- Await the complete rendering of the classic report “Select Items”. (Line 3)I’ve given it a static ID: “jest_step2_selectItems”
- Then I move and focus my mouse to the “Add to Cart” dynamic select list item. It has been given an id as we constructed it, using apex_item.select_list function, and in this case it is “f03_1” (Line 4–5 )
- I randomly select the second item in the list (Line 6–7)
- I move on the next step of the wizard(Line 8–9)
- Expect the next Page Title to be: “”Sample Database Application — Order Summary”(Line 12)
- Expect the next Page alias to be “placeorder_ordersummary” (Line 15)
Next…
Up until now, we saw how to write isolated tests. In the next & last article about automated front-end tests in APEX, we will deal with the challenge in finding a way to organize tests in an efficient manner. Well, we’re not gonna write all test cases for an entire application in one single file, are we? We need to be able to break our tests down in separate files, reuse some functions, avoid repetitions, globally configure jest, define the order in which test cases run and write maintainable test cases. I shall hopefully also give out a full functioning example for your inspection.
