woocommerce/tests/e2e-tests/front-end/checkout-page.js

import config from 'config';
import chai from 'chai';
import chaiAsPromised from 'chai-as-promised';
import test from 'selenium-webdriver/testing';
import { WebDriverManager, WebDriverHelper as helper } from 'wp-e2e-webdriver';
import { Helper, PageMap, CheckoutOrderReceivedPage, StoreOwnerFlow, GuestCustomerFlow } from 'wc-e2e-page-objects';

chai.use( chaiAsPromised );

const assert = chai.assert;
const PAGE = PageMap.PAGE;
const storeOwnerFlowArgs = {
	baseUrl: config.get( 'url' ),
	username: config.get( 'users.admin.username' ),
	password: config.get( 'users.admin.password' )
};

const assertOrderItem = ( orderReview, itemName, attrs ) => {
	assert.eventually.ok(
		orderReview.hasItem( itemName, attrs ),
		`Could not find order item "${ itemName }" with qty ${ attrs.qty } and total ${ attrs.total }`
	);
};

let manager;
let driver;

test.describe( 'Checkout Page', function() {
	// open browser
	test.before( function() {
		this.timeout( config.get( 'startBrowserTimeoutMs' ) );

		manager = new WebDriverManager( 'chrome', { baseUrl: config.get( 'url' ) } );
		driver = manager.getDriver();

		helper.clearCookiesAndDeleteLocalStorage( driver );

		const storeOwner = new StoreOwnerFlow( driver, storeOwnerFlowArgs );

		// General settings for this test.
		storeOwner.setGeneralSettings( {
			baseLocation: [ 'United States', 'United States (US) — California' ],
			sellingLocation: 'Sell to all countries',
			enableTaxes: true,
			currency: [ 'United States', 'United States (US) dollar ($)' ],
		} );

		// Make sure payment method is set in setting.
		storeOwner.enableBACS();
		storeOwner.enableCOD();
		storeOwner.enablePayPal();

		storeOwner.logout();
	} );

	this.timeout( config.get( 'mochaTimeoutMs' ) );

	test.it( 'should displays cart items in order review', () => {
		const guest = new GuestCustomerFlow( driver, { baseUrl: config.get( 'url' ) } );
		guest.fromShopAddProductsToCart( 'Beanie', 'Long Sleeve Tee' );

		const checkoutPage = guest.openCheckout();
		assert.eventually.ok( Helper.waitTillUIBlockNotPresent( driver ) );

		const orderReview = checkoutPage.components.orderReview;
		assertOrderItem( orderReview, 'Beanie', { qty: '1', total: '18.00' } );
		assertOrderItem( orderReview, 'Long Sleeve Tee', { qty: '1', total: '25.00' } );
		assert.eventually.ok( orderReview.hasSubtotal( '43.00' ), 'Could not find subtotal 43.00' );
	} );

	test.it( 'allows customer to choose available payment methods', () => {
		const guest = new GuestCustomerFlow( driver, { baseUrl: config.get( 'url' ) } );
		guest.fromShopAddProductsToCart( 'Beanie', 'Long Sleeve Tee' );

		const checkoutPage = guest.openCheckout();
		assert.eventually.ok( Helper.waitTillUIBlockNotPresent( driver ) );
		assert.eventually.ok( checkoutPage.selectPaymentMethod( 'PayPal' ) );
		assert.eventually.ok( checkoutPage.selectPaymentMethod( 'Direct bank transfer' ) );
		assert.eventually.ok( checkoutPage.selectPaymentMethod( 'Cash on delivery' ) );
	} );

	test.it( 'allows customer to fill billing details', () => {
		const guest = new GuestCustomerFlow( driver, { baseUrl: config.get( 'url' ) } );
		guest.fromShopAddProductsToCart( 'Beanie', 'Long Sleeve Tee' );

		const checkoutPage = guest.open( PAGE.CHECKOUT );
		assert.eventually.ok( Helper.waitTillUIBlockNotPresent( driver ) );

		const billingDetails = checkoutPage.components.billingDetails;
		assert.eventually.ok( billingDetails.setFirstName( 'John' ) );
		assert.eventually.ok( billingDetails.setLastName( 'Doe' ) );
		assert.eventually.ok( billingDetails.setCompany( 'Automattic' ) );
		assert.eventually.ok( billingDetails.setEmail( 'john.doe@example.com' ) );
		assert.eventually.ok( billingDetails.setPhone( '123456789' ) );
		assert.eventually.ok( billingDetails.selectCountry( 'united states', 'United States (US)' ) );
		assert.eventually.ok( billingDetails.setAddress1( 'addr 1' ) );
		assert.eventually.ok( billingDetails.setAddress2( 'addr 2' ) );
		assert.eventually.ok( billingDetails.setCity( 'San Francisco' ) );
		assert.eventually.ok( billingDetails.selectState( 'cali', 'California' ) );
		assert.eventually.ok( billingDetails.setZip( '94107' ) );
	} );

	test.it( 'allows customer to fill shipping details', () => {
		const guest = new GuestCustomerFlow( driver, { baseUrl: config.get( 'url' ) } );
		guest.fromShopAddProductsToCart( 'Beanie', 'Long Sleeve Tee' );

		const checkoutPage = guest.open( PAGE.CHECKOUT );
		assert.eventually.ok( Helper.waitTillUIBlockNotPresent( driver ) );
		assert.eventually.ok( checkoutPage.checkShipToDifferentAddress() );

		const shippingDetails = checkoutPage.components.shippingDetails;
		assert.eventually.ok( shippingDetails.setFirstName( 'John' ) );
		assert.eventually.ok( shippingDetails.setLastName( 'Doe' ) );
		assert.eventually.ok( shippingDetails.setCompany( 'Automattic' ) );
		assert.eventually.ok( shippingDetails.selectCountry( 'united states', 'United States (US)' ) );
		assert.eventually.ok( shippingDetails.setAddress1( 'addr 1' ) );
		assert.eventually.ok( shippingDetails.setAddress2( 'addr 2' ) );
		assert.eventually.ok( shippingDetails.setCity( 'San Francisco' ) );
		assert.eventually.ok( shippingDetails.selectState( 'cali', 'California' ) );
		assert.eventually.ok( shippingDetails.setZip( '94107' ) );
	} );

	test.it( 'allows guest customer to place order', () => {
		const guest = new GuestCustomerFlow( driver, { baseUrl: config.get( 'url' ) } );
		guest.fromShopAddProductsToCart( 'Beanie', 'Long Sleeve Tee' );

		const checkoutPage = guest.open( PAGE.CHECKOUT );
		const billingDetails = checkoutPage.components.billingDetails;
		Helper.waitTillUIBlockNotPresent( driver );
		billingDetails.setFirstName( 'John' );
		billingDetails.setLastName( 'Doe' );
		billingDetails.setCompany( 'Automattic' );
		billingDetails.setEmail( 'john.doe@example.com' );
		billingDetails.setPhone( '123456789' );
		billingDetails.selectCountry( 'united states', 'United States (US)' );
		billingDetails.setAddress1( 'addr 1' );
		billingDetails.setAddress2( 'addr 2' );
		billingDetails.setCity( 'San Francisco' );
		billingDetails.selectState( 'cali', 'California' );
		billingDetails.setZip( '94107' );
		Helper.waitTillUIBlockNotPresent( driver );
		checkoutPage.selectPaymentMethod( 'Cash on delivery' );
		checkoutPage.placeOrder();
		Helper.waitTillUIBlockNotPresent( driver );

		assert.eventually.ok(
			checkoutPage.hasText( 'Order received' )
		);
	} );

	// take screenshot
	test.afterEach( function() {
		if ( this.currentTest.state === 'failed' ) {
			helper.takeScreenshot( manager, this.currentTest );
		}
	} );

	// quit browser
	test.after( () => {
		manager.quitBrowser();
	} );
} );