How To SignIn Magento2 Frontend Using CasperJS

Manual Testing is a time consuming and tough task to do. In manual testing, it happens to do same tests many times like create a new account, sign in, order placement etc for magento2 store, which is boring. There are some good tools available which make it easier. CasperJS is one of them. CasperJS comes with a basic testing suite that allows you to run full featured tests without the overhead of a full browser. It uses selector and events to do tests.

For the installation and basic CasperJS knowledge, you can check here. Now we’ll proceed with the testing process. Here we’ll learn how we can sign in using CasperJS for magento2 store. This script will also show you proper error messages for wrong inputs

The script procedure is as follows-
Open home page of your Magento2 store, click on “SignIn” link, Fill Login Form, Click on SignIn button, wait to be redirected to “My Account Dashboard” page and then get the title of My account page.

Here we have used some CasperJS methods like-

start(): For Opening Magento2 Store Homepage

Searching for an experienced
Magento Company ? Find out More

casper.cli.get(0): For getting input from the terminal. Here 0 is an index of input.

waitForSelector(): Waits until an element matching the provided.

click(): method is used to click a link and buttons.

fill(): method is used to fill the forms.

exists(): Checks if any element matches with the provided selector

wait(): wait for given amount of time

bypass(): To Skip a given number of defined navigation steps

fetchText(): Retrieves text of given selector

getTitle(): Retrieves page title

/**
* Webkul Software.
*
* @category Webkul
* @package Webkul_CasperJS
* @author Webkul
* @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/

var casper = require('casper').create({
	verbose: true,
});
var email = '';
var password = '';

//Home page link
casper.echo('Current Magento2 link is: ' + casper.cli.get(0), "INFO");
casper.start(casper.cli.get(0));
casper.echo("Testing frontend login...", "COMMENT");

//Go to login page & Fields value assignment
casper.waitForSelector('body > div.page-wrapper > header > div.panel.wrapper > div > ul > li.authorization-link > a', function () {
	this.click('body > div.page-wrapper > header > div.panel.wrapper > div > ul > li.authorization-link > a')
	if (casper.cli.get(1)) {
		email = casper.cli.get(1);
	}
	if (casper.cli.get(2)) {
		password = casper.cli.get(2);
	}
});

//Login Form Fillup
casper.waitForSelector('#login-form', function () {
	this.echo('Current Page Title is: ' + this.getTitle(), "INFO");
	this.fill('form#login-form', {
		'login[username]': email,
		'login[password]': password

	}, false);
	this.echo('Login Form Filled', "COMMENT");
});

//Click Sign In Button
casper.then(function () {
	this.click('#send2');
});

//Frontend Field validation Check
casper.then(function () {

	//email error massage.
	if (this.exists('#email-error')) {
		this.echo('Email:' + this.fetchText('#email-error'), "ERROR");
		this.bypass(1);

	}

	//Password error massage.
	if (this.exists('#pass-error')) {
		this.echo('Password:' + this.fetchText('#pass-error'), "ERROR");
		this.bypass(1);
	}
});

casper.wait(3000, function () {
	if (email == '') {
		this.echo('Email Should be required Field');
	}
	if (password == '') {
		this.echo('password Should be required Field')
	}

	//Invalid Login massage.
	if (this.exists('#maincontent > div.page.messages > div:nth-child(2) > div:nth-child(1) > div > div')) {
		this.echo(this.fetchText('#maincontent > div.page.messages > div:nth-child(2) > div:nth-child(1) > div > div'), "INFO");
	} else {

		//Login Successfull.
		this.echo('Current Page Title is: ' + this.getTitle(), "INFO");
		this.echo("Successfully Logged In", "COMMENT");
	}
});

casper.run();

Now you have to run a command on your terminal-

casperjs your_file_name.js http://your_magento_homepage email_id password

Here, you can see the result on your terminal –