Table of contents

E2E Coupon

On this page

Webshops and subscription-based services often offer discounts through coupon codes. Applying a valid coupon code during checkout might reduce the price of one, several, or all items in the shopping cart.

Steps

While discount coupons will be applied in different ways depending on the service or shop they are relevant to, in most cases:

Having selected one or more products will be a prerequisite for applying the coupon
Entering a valid coupon will result in visible feedback, i.e. a reduction of the previous product/cart price

The following example, running against our test site, will add a variable number of items to the cart, then proceed to compare the total price before and after applying the coupon. The coupon is reducing the price of the whole shopping cart by 20%, therefore we will be asserting that the discounted price is reduced by the right amount. For this step we have chosen Chai, but any solid assertion library will do.

Playwright


const assert = require('chai').assert
const { chromium } = require('playwright')
const productsNumber = process.env.PRODUCTS_NUMBER || 3

;(async () => {
  const browser = await chromium.launch()
  const page = await browser.newPage()

  await page.goto('https://danube-web.shop/')

  for (let i = 1; i <= productsNumber; i++) {
    await page.click(`.preview:nth-child(${i}) > .preview-author`)
    await page.click('.detail-wrapper > .call-to-action')
    await page.click('#logo')
  }

  await page.click('#cart')

  await page.waitForSelector('#total-price')
  const price = await page.$eval('#total-price', (e) => e.innerText)

  await page.click('.cart > label')
  await page.click('#coupon')
  await page.type('#coupon', 'COUPON2020')
  await page.click('.cart > div > button')

  const expectedDiscountedPrice = price * 0.8
  const discountedPrice = await page.$eval('#total-price', (e) => e.innerText)
  assert.equal(discountedPrice, expectedDiscountedPrice)

  await browser.close()
})()

Run in Checkly

Puppeteer


const puppeteer = require('puppeteer')
const assert = require('chai').assert
const productsNumber = process.env.PRODUCTS_NUMBER || 3

;(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  await page.goto('https://danube-web.shop/')

  await page.setViewport({ width: 1792, height: 925 })

  for (let i = 1; i <= productsNumber; i++) {
    await page.waitForSelector(
      '.preview:nth-child(1) > .preview-details > p:nth-child(1)'
    )
    await page.click(`.preview:nth-child(${i}) > .preview-author`)
    await page.waitForSelector('.detail-wrapper > .call-to-action')
    await page.click('.detail-wrapper > .call-to-action')
    await page.waitForSelector('#logo')
    await page.click('#logo')
  }

  await page.waitForSelector('#cart')
  await page.click('#cart')

  const price = await page.$eval('#total-price', (e) => e.innerText)

  await page.waitForSelector('.cart > label')
  await page.click('.cart > label')

  await page.waitForSelector('#coupon')
  await page.click('#coupon')

  await page.type('#coupon', 'COUPON2020')

  await page.waitForSelector('.cart > div > button')
  await page.click('.cart > div > button')

  const expectedDiscountedPrice = price * 0.8
  const discountedPrice = await page.$eval('#total-price', (e) => e.innerText)
  assert.equal(discountedPrice, expectedDiscountedPrice)

  await browser.close()
})()

Run in Checkly

Run this example as follows:

macOS

PRODUCTS_NUMBER=3 node coupon.js

Windows

SET PRODUCTS_NUMBER=3
node coupon.js

Takeaways

We can simply verify that coupons are accepted, or also check that they command the right discount.
Assertion libraries are useful when non-trivial assertions are required.