cortexmg / nightwatch-xhr

An XHR "Listener" for Nightwatch.js
MIT License
28 stars 29 forks source link

Empty Array #45

Open racmd opened 4 years ago

racmd commented 4 years ago

I'm currently following one of the examples to try get the response data ` module.exports = { 'LogIn': function (browser) {

    browser

        .url(browser.globals.baseUrl, function () {

            browser.pause(1000)
            .assert.urlContains(browser.globals.loginUrl)
        })
        .waitForElementVisible('#email-input')
        .setValue(selector.LOGIN.EMAIL, browser.globals.user_credentials.login)
        .setValue(selector.LOGIN.PASSWORD, atob(browser.globals.user_credentials.password))
        .click(selector.LOGIN.SIGNIN)
        .listenXHR()
        .waitForElementVisible(selector.BUTTONS.UPLOAD)
        .getXHR('', 1000, function (xhrs) {
            console.log(xhrs)
        })
}

}`

However when i tried to run the above code, it returns an empty array

Pieras2 commented 4 years ago

I had also problem with this xhr npm module. What helped me was to change in its source file. Find in node_modules its code with listener onLoadend. Make a copy of it and change the trigger to onLoadstart. It helped me to see some data but unfortunately it did not found all the hxrs I needed. I posted some example of it on github under nightwatch-xhr

Pieras2 commented 4 years ago

Screenshot_20200225-234217_Samsung Internet

racmd commented 4 years ago

`

this.onloadend = function () { if (this.readyState === XMLHttpRequest.DONE) { var xhr = getXhr(this.id); if (xhr) { xhr.httpResponseCode = this.status; xhr.responseData = this.response; xhr.status = this.status === 200 ? 'success' : 'error'; xhr.responseHeaders = this.getAllResponseHeaders(); } } }; `

this one ? where do i paste it ?

Pieras2 commented 4 years ago

Please find file client.js in node_modules where this package is installed. If you use visual studio code the keyboard shortcut ctrl+shift+h does the search among all filez.

racmd commented 4 years ago

yes i found the client.js in node_modules and also found the function you want me to copy. next step is just basically paste it on top of this.onloadend = function () but different function name ? this.onloadstart = function() <--- pasted from this.onloadend function

Pieras2 commented 4 years ago

Yes. If in original was onloadeventend try onloadevent start. It helped in my case, I started to grab some XHRs. When you call get method as far as I remember you can leave " " to get everything. Unfortunately this nightwatch-xhr has been abandonded as nobody was replying.

śr., 26 lut 2020, 00:08 użytkownik racmd notifications@github.com napisał:

yes i found the client.js in node_modules and also found the function you want me to copy. next step is just basically paste it on top of this.onloadend = function () but different function name ? this.onloadstart = function() <--- pasted from this.onloadend function

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/cortexmg/nightwatch-xhr/issues/45?email_source=notifications&email_token=AMUVMH22JFTWQX2TFUVLN2DREWQF7A5CNFSM4K3UWZU2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEM55IJA#issuecomment-591123492, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMUVMH4CVTYSPXLA66XZRW3REWQF7ANCNFSM4K3UWZUQ .

racmd commented 4 years ago

doesn't seem to change anything in my case :(

Pieras2 commented 4 years ago

Tommorow I will try to install it and provide some example of how it's working. Did you check in browser inspector that the request you want to get are really XHRs or not else?

racmd commented 4 years ago

i shall try that thank you so much for your help

Pieras2 commented 4 years ago

Aaaa one more thing. I don't remember if it was mentioned before somewhere but it matters if the click() is prior get() or after. I think click() is supposed to be before and next line is with get

Pieras2 commented 4 years ago

@racmd I installed pure installation of nightwatch and nightwatch-xhr and managed to get some XHRs (however installation of nightwatch, then configuration is a disaster - documentation sorry sucks).

I made such a test.js and it works


module.exports = {
    'LogIn': function (browser) {
        browser
            .url("https://www.webpagetest.org/")
            .click('a[title="About"]')
            .listenXHR()
            .getXHR('', 12000, function (xhrs) {
                console.log('>>>>' + JSON.stringify(xhrs))
            })
    }
}

It looks that it won't work if you replace lines click() and listenXHS() - click is a trigger then listenXHR applies. It is important to give bigger delay in get - no idea why but it requires wait until everything finishes. With this example you don't have to modify anything in nightwatch-xhr source files.

Please let me know if this works for you - copy paste of test

JalilArfaoui commented 4 years ago

Hi everyone,

Just to let you know that although I did work on this repo and added some features, I did not have time recently to handle open issues :-/

But that doesn’t mean project is dead, and I guess PR are still welcomed if you spotted any issue with current code !

Pieras2 commented 4 years ago

@JalilArfaoui honestly speaking it's difficult to achieve positive results.

I am not programmer, experienced tester which begins with programming but I don't go really deep in tools. I find problems with using nightwatch-xhr however it is really important in e2e testing to monitor background traffic.

I'm not able to investigate and provide fixes but at least provide some examples when it doesn't work. I can help to find scenarios when it doesn't work to help make the tool better - providing you have time to analyze. Maybe I won't give dozens of scenarios but I could make some clean project in visual studio code where I would put my code examples and share it here < even if the commit would be readme update, then it's already a success to know how to do and what not to do (in testing code).

racmd commented 4 years ago

@Pieras2 Hi I tried using your example, it does work using the example url you given. however for some unknown it doesn't work on the url I'm currently using to login into

Pieras2 commented 4 years ago

@racmd, ok so we now know that the code and usage is correct. What I know ...

  1. this doesn't work for all the request I had in my project (no idea about reason etc)
  2. in original shape of nightwatch-xhr I guess it has problem with requests that are sent twice and e.g. first is cancelled (not fully sure, in my project I noticed some requests were doubled or 1st is always get for options, then the request I expect) ... no idea to me why this module doesn't do the job.

Now you can try this ...

  1. enter node_modules/nightwatch-xhr/es5/client.js
  2. between line 34 and 35 paste this block

    
    this.onloadstart = function () {
                if (this.readyState === XMLHttpRequest.DONE) {
                    var xhr = getXhr(this.id);
                    if (xhr) {
                        xhr.httpResponseCode = this.status;
                        xhr.responseData = this.response;
                        xhr.status = this.status === 200 ? 'success' : 'error';
                        xhr.responseHeaders = this.getAllResponseHeaders();
                    }
                }
            };

Save this file and try again. I read on this page https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange about events. Now it is the moment when we have to get some knowledge or find some smart programmer who knows HTTP etc. to improve nightwatch-xhr or at least could provide some tricks where change and what in source files

Pieras2 commented 4 years ago

I would be happy if more people shared their feedback and experience with XHR monitoring.

racmd commented 4 years ago

Interesting it works on some website and doesn't work on others I tried doing it with Amazon and Airbnb, it works but then trying it on google and my website it doesn't work (empty array)

racmd commented 4 years ago

@Pieras2 So i tried doing your fixes unfortunately it still doesn't work (empty array) on the website I'm currently testing.

Pieras2 commented 4 years ago

Does the request you are looking for is sent once and succeeds always? Is the request within 1 domain? I don't know if it matters but e.g. cypress when I was using was not allowing test across different domains (it's a pitty as some webApp solutions work thisway) and maybe nightwatch-xhr has such limitation.... or requests happen faster than n-xhr is capable to catch it ... if it's possible though

śr., 26 lut 2020, 22:46 użytkownik racmd notifications@github.com napisał:

Interesting it works on some website and doesn't work on others I tried doing it with Amazon and Airbnb, it works but then trying it on google and my website it doesn't work (empty array)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/cortexmg/nightwatch-xhr/issues/45?email_source=notifications&email_token=AMUVMH2XPV3NNBXHIZO424LRE3PLHA5CNFSM4K3UWZU2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENCAN3Q#issuecomment-591660782, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMUVMH22DTRJXGMICBHF3VDRE3PLHANCNFSM4K3UWZUQ .

christophedebatz commented 4 years ago

Same problem than @racmd Empty array when testing with getXHR and unable to trigger the click event when I use the waitForXHR command (unable to locate element... but my element is clickable because without nightxatch-xhr, the click is working well). By the way, the query I want to listen to is triggered (I see it on the Network tab of developers tool). 👍

Pieras2 commented 4 years ago

I open popcorn ;) All I mean is that this XHR plugin doesn't work ok. Needs further development. I wish it was working as described - and as you guys also confirm, it's far from perfect :(

christophedebatz commented 4 years ago

@Pieras2 the code to spoof the network with Javascript is very simple in fact. Just have a look to this code and you will understand what the plugin is really doing: https://gist.github.com/icodejs/3183154 This plugin was a way to go straight for me. But the time I passed on it begins to be more than I wanted. So, I will try rewrite my own nightwatch command to do the same. Have a good day. Good luck for the rest ;-)

Pieras2 commented 4 years ago

I will try. Thank you.

Bugazelle commented 4 years ago

Hello @racmd @Pieras2 @christophedebatz ,

These days, I also trying to capture the network traffics, and has the same Empty Array issue.

Luckily, I have figured out a walkaround to capture the XHR request. @christophedebatz : thank you to point out the https://gist.github.com/icodejs/3183154, it is the key!!

For the demo, please refer to: https://github.com/Bugazelle/nightwatch-capture-network-traffic

Hope could be the help to all of you guys.

Cheers