What to do if i need to login user before run the Wraith?

[lvlmd]

I have site. But a lot of pages are available only for registered user. How to use Wraith in that case? Please advice.

[SimonKeep]

I've tried two methods for this with forms authenticated pages.

1. Use a before_capture script to perform the login when the page is redirected to the logon page.

2. Add a valid cookie in the phantom.js driver used by wraith (mine is located here C:\Ruby22-x64\lib\ruby\gems\2.2.0\gems\wraith-3.2.0\lib\wraith\javascript\phantom.js). This is a bit of a hack as you have to remember to set it up again either when the cookie expires or if you upgrade Wraith but I have found it to be more reliable than 1).

The cookie is added like this before the page.open...

phantom.clearCookies();

phantom.addCookie({
'name': 'MyAuthCookie',
'value': '1BA1EC8FD7BABDCB08CCBD6102C46E9CEB63AD69F940D8A84BA8A43656A3ABB996AFEE956892C460DFA3AB9C3824441AE5D0FE4ED1F67554DC668072463044B1A6DD83CF428D44B82BDF5E3A0934165D64CC6EB98A46683F7E2E619169F1A3C395380976E99AE2010B2F9D2D5E9466D4CE6E18CD190767374C0C7B821199E468035A9A2357D47C2B8F567E6FB1670758D9AA425D',
'domain': 'localhost',
'path':'/'
});

page.open(url, function(status) {...

[SimonKeep]

I can't guarantee this is correct but the script was something like this, literally pasting the username and password in and clicking submit.

module.exports = function (phantom, ready) {
    phantom.evaluate(function(){

                if ($("#logonContainer").length > 0)
                {           
                    // Enter username and password in the input fields
                    $("#UserName").val("yourusername");
                    $("#Password").val("yourpassword");

                    // Click the submit button
                    clickElement($("input:submit")[0]); 
                }   
            }); 
        });     
    });                                 

    setTimeout(function(){ready();}, 20000);    
}

Note: that the setTimeout has to be long enough to give time for the logon page to redirect the browser back to the original page that you were trying to capture.

...and the config file refers to the script like this...

before_capture: 'javascript/logon.js'

[muralir87]

Hi SimonKeep,

Can you elaborate this in detail, even am facing the same issue.
Please help me out here as am new to phantomjs browser and image comparison.
If u explain authentication with step by step configuration it will be more helpful.

Regards
Murali

[lvlmd]

i need the same bro. Please, guys, who can help?

[Yuvaraja-KS]

Please help. I am also looking for image comparison, once I have logged in. If you could provide step by step configuration steps, that would be great.

[ChrisBAshton]

@SimonKeep provides a good way of doing this in his comment (thanks, Simon!), but leaves out one detail, which I'll fill in now.

This kind of thing will vary for every user, so unfortunately we can't do any more than provide general guidance. Though Simon's code is a good starting point, the contents of your file will have to be tweaked according to your needs. E.g. the ID of your username/password fields will be different. Also if you don't have jQuery in the page you'll have to rewrite in vanilla JS.

His approach will work if your login script redirects you to the page you want to test - but assuming your login script always redirects you to, say, /dashboard, then you'd never be able to take screenshots of other 'logged in' pages, e.g. /settings.

Take this example YAML file:

paths:
  'dashboard': '/dashboard'
  'account': '/account'
  'settings': '/settings'

before_capture: 'js/login.js'

In the before_capture script we need to log the user in as per Simon's approach, but then we need to redirect to the original requested page so we take a screenshot of the right page. Here is a Casper example:

module.exports = function (casper, ready) {
    casper.open('/login.php');

    casper.evaluate(function () {
        // write your JS which fills in your login form and submits it here   
    });

    // at this point we're now at /dashboard - so need to redirect ourselves to the
    // page we wanted to test in the first place, e.g. /settings
    casper.thenOpen(casper.page.url); // casper.page.url is the URL Wraith originally tried to load (before /login.php)

    ready();

Alternative approach

If you have control over the server-side code of the website you want to test, you could use the before_capture hook to set a custom header - e.g. change your user agent to wraith - then look for that header when a request is made to your server, and mock the login of a test user account when you see that header.

So for example, you could visit /settings with your user agent set to wraith, and your server would know to show you the settings page for a user called TestAccount.

---

Hope that's useful! We can't really provide any more specific advice I'm afraid. Good luck with your testing!