Clicking navigation button in Puppeteer returns null response? How to see which function is being clicked?

Issue

I'm trying to test clicking a button on a registration app to make sure that the page correctly navigates to the right page.

When I console.log out response in the code it returns an array that looks like this

[undefined, null]

However when I take a screenshot of the page or check the url, the click and navigation worked. It is on the correct page.

I don't understand why this is returning undefined/null. Also, I could not figure out how to test which function was being called when you click on the button.

I wanted to be able to see the actual function that is being called.

I'm using AngularJS 1.6, Mocha, Puppeteer 1.11, and Node 6.4.0

I'm also a junior dev so it could be something simple that I just didn't understand, please help!

it('should rederict to guest_sms_code state when clicking \'I have a guest code\'', async (function () {
    var response = await (Promise.all([
        page.waitForNavigation({waitUntil: 'domcontentloaded'}),
        page.click('[ng-click="enterSmsCode()"]'),
      ]));
    var url = await (page.url());
    if (url.indexOf('guest_sms_code') === -1) {
        assert.ok(false, 'The URL does not contain \'guest_sms_code\'')
    }
}))

Solution

I'm not convinced that you can tell which method is called from a UI test. That's something that a JavaScript unit test can prove using, say, something like Mocha or Jest to test your codes behaviour. However an automated UI test, from my experience, won't tell you that. After all, you're trying to hide the inner workings of your app from an external user, right?

As for why the Promise.all([]) call is returning [undefined, null], well I can at least help you with that.

Firstly, you should have a look at the API documentation for both methods you've invoked in your test:

waitForNavigation docs: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitfornavigationoptions

click docs: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageclickselector-options

In the case of waitForNavigation the response actually returns a Promise which may or may not have a Response value. Whether any data is returned with that Response is dependent on the navigation that occurs in the UI. In your case, you're seeing that undefined value in your array to indicate that there has not been any Response data returned from the navigation.

For the click method, this also just returns a resolved or rejected Promise with no data of any kind returned. So, naturally, you've no actual value returned here at all hence the null value being pushed to the array.

Answered By - AJC24