Extend your own node.js website testing to test shopping cart total and add more test cases in Mocha framework and publish results using Allure Report
Dear QA and Automation Engineers!
In this article we will extend our mocha pageobjects test scripts to include shopping cart page testing, check total displayed on shopping cart, test Home Page, a login page, login action, a secured Dashboard that is only accesible to logged in users. This time we will run 6 test cases. You can test using MOCHA/Jasmine/Selenium test frameworks and using any WebDriver ex: WebdriverIO on Chrome, Edge or other browsers and can use any test reporter like spec, allure and others. For our test scenario we are using Mocha as test framework and Allure Reporting as our HTML report.
Please complete step 1, 2 and 3 before proceeding to Step 4:
Step 1: Set up node.js webserver and mocha test framework env
https://www.dhirubhai.net/pulse/ui-automation-testing-using-nodejs-webserver-reactjs-mohammed-e4eje/
Step 2: Create a home page, login page, secure dashboard and shopping cart module: https://www.dhirubhai.net/pulse/creating-login-shopping-cart-module-qas-using-nodejs-server-mohammed-z1vhc/
Step 3: Create Mocha test scripts to test your own website
Step 4: Extend your scripts to test ShoppingCart page and total displayed
We are going add following UI test cases to our testing:
Update our Mocha test scripts
CD to your "\webdriverio-mocha\test\pageobjects" folder
cd \webdriverio-mocha\test\pageobjects
Update or create page.js file with below code
const { browser } = require('@wdio/globals')
/**
* main page object containing all methods, selectors and functionality
* that is shared across all page objects
*/
module.exports = class Page {
/**
* Opens a sub page of the page
* @param path path of the sub page (e.g. /path/to/page.html)
*/
open (path) {
return browser.url(`https://localhost:3000/${path}`)
}
}
Update or create home.page.js file with below code
const Page = require('./page');
class HomePage extends Page {
get loginLink() { return $('p.login-link'); } // Ensure this matches Home.js
async goToLogin() {
await this.loginLink.click();
}
open() {
return super.open('');
}
}
module.exports = new HomePage();
Update or create login.page.js file with below code
const Page = require('./page');
class LoginPage extends Page {
get usernameInput() { return $('input[type="text"]'); }
get passwordInput() { return $('input[type="password"]'); }
get loginButton() { return $('button.btn'); }
get errorMessage() { return $('p.error'); }
async login(username, password) {
await this.usernameInput.setValue(username);
await this.passwordInput.setValue(password);
await this.loginButton.click();
}
open() {
return super.open('login');
}
}
module.exports = new LoginPage();
Update or create dashboard.page.js file with below code
const Page = require('./page');
class DashboardPage extends Page {
get dashboardTitle() { return $('h2.fade-in'); }
get shoppingCartButton() { return $('#shopping-cart-btn'); } // Ensure button ID matches Dashboard.js
async goToShoppingCart() {
await this.shoppingCartButton.waitForDisplayed();
await this.shoppingCartButton.click();
}
open() {
return super.open('dashboard');
}
}
module.exports = new DashboardPage();
Update or create shoppingcart.page.js file with below code
const Page = require('./page');
class ShoppingCartPage extends Page {
get pageTitle() { return $('h2.fade-in'); }
get itemList() { return $$('ul.cart-items li'); }
get totalText() { return $('h3.total-cost'); }
get logoutButton() { return $('button.logout'); } // Ensure this matches ShoppingCart.js
async getItemPrices() {
const items = await this.itemList;
const prices = [];
for (let item of items) {
let text = await item.getText();
let price = parseInt(text.split('?')[1].trim(), 10);
prices.push(price);
}
return prices;
}
async getDisplayedTotal() {
const totalText = await this.totalText.getText();
return parseInt(totalText.split('?')[1].trim(), 10);
}
async calculateTotal() {
const prices = await this.getItemPrices();
return prices.reduce((acc, price) => acc + price, 0);
}
async logout() {
await this.logoutButton.click();
}
open() {
return super.open('cart');
}
}
module.exports = new ShoppingCartPage();
Update or create secure.page.js file with below code (you may not need it)
const Page = require('./page');
class SecurePage extends Page {
get dashboardMessage() {
return $('h2=Welcome to Your Dashboard');
}
get logoutButton() {
return $('button=Logout');
}
async logout() {
await this.logoutButton.click();
}
}
module.exports = new SecurePage();
CD to your "\webdriverio-mocha\test\specs" folder
cd \webdriverio-mocha\test\specs
Update or create test.e2e.js file with below code
领英推荐
const { expect } = require('@wdio/globals');
const allure = require('@wdio/allure-reporter').default;
const HomePage = require('../pageobjects/home.page');
const LoginPage = require('../pageobjects/login.page');
const DashboardPage = require('../pageobjects/dashboard.page');
const ShoppingCartPage = require('../pageobjects/shoppingcart.page');
describe('Shopping Cart Test Flow', () => {
it('Step 1: User accesses Home Page', async () => {
allure.addFeature('Shopping Cart');
allure.addStory('User Journey');
allure.addStep('Opening Home Page');
await HomePage.open();
await browser.pause(2000);
await expect(HomePage.loginLink).toBeExisting();
allure.addStep('Home Page Loaded Successfully');
});
it('Step 2: Click login link to go to Login Page', async () => {
allure.addStep('Clicking on Login Link');
await HomePage.goToLogin();
await browser.pause(2000);
await expect(LoginPage.usernameInput).toBeExisting();
allure.addStep('Login Page Loaded Successfully');
});
it('Step 3: Login with valid credentials', async () => {
allure.addStep('Entering Credentials');
await LoginPage.login('qateam', 'iloveqa');
await browser.pause(2000);
await expect(DashboardPage.dashboardTitle).toHaveText('Welcome to Your Dashboard');
allure.addStep('User Logged in Successfully');
});
it('Step 4: Click on Shopping Cart button', async () => {
allure.addStep('Navigating to Shopping Cart');
await DashboardPage.goToShoppingCart();
await browser.pause(2000);
await expect(ShoppingCartPage.pageTitle).toHaveText('Shopping Cart');
allure.addStep('Shopping Cart Page Loaded Successfully');
});
it('Step 5: Verify total cost in Shopping Cart', async () => {
allure.addStep('Fetching item prices');
const displayedTotal = await ShoppingCartPage.getDisplayedTotal();
const calculatedTotal = await ShoppingCartPage.calculateTotal();
allure.addStep('Comparing Calculated and Displayed Totals');
expect(displayedTotal).toEqual(calculatedTotal);
await browser.pause(2000);
allure.addStep('Total Cost Verified Successfully');
});
it('Step 6: Logout and verify redirection to Login Page', async () => {
allure.addStep('Clicking Logout Button');
await ShoppingCartPage.logout();
await browser.pause(2000);
await expect(LoginPage.usernameInput).toBeExisting();
allure.addStep('User Successfully Redirected to Login Page');
});
});
Now run the test and check if your tests are getting launched in a broswer visually.
cd to your root folder
CD to your "\webdriverio-mocha\" folder
cd \webdriverio-mocha\
npx wdio run wdio.conf.js
The test will execute and show you status of your test execution and report on 6 test cases.
At this time Allure Reporting has also generated Allure data and kept in folder named allure-results at "\webdriverio-mocha\allure-results" location
We now need to generate HTML reports and launch the reports to check the report:
Run the command:
npx allure generate allure-results --clean && npx allure open
In case you face issue then run the commands seperately
npx allure generate allure-results --clean
npx allure open
Your HTML reports will be launched automatically
Above exercise will launch Mocha tests to run following six UI test cases and produce results
NOTE:
Articles in This Series:
Step 1: Set up node.js webserver and mocha test framework env
https://www.dhirubhai.net/pulse/ui-automation-testing-using-nodejs-webserver-reactjs-mohammed-e4eje/
Step 2: Create a home page, login page, secure dashboard and shopping cart module: https://www.dhirubhai.net/pulse/creating-login-shopping-cart-module-qas-using-nodejs-server-mohammed-z1vhc/
Step 3: Create Mocha test scripts to test your own website
Step 4: Extend Mocha test to test shopping cart (This article)
Step 5: Next we will learn OOPS concepts in JavaScript and use node.js server and react.js to create our OOPS scripts to enhance our learning.
Instructions are here: https://www.dhirubhai.net/pulse/learn-oops-concepts-encapsulation-inheritance-using-very-mohammed-xg7qc/