Merge pull request #9 from danielarbc/refact/improve-checkout-commands

Refact/improve checkout commands

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "Onesie"
+    ]
+}

cypress/e2e/checkout.cy.js

@@ -1,7 +1,12 @@
 import { faker } from "@faker-js/faker"
 
-const product = {
-  dataTestName: "backpack",
+const products = {
+  backpack: 0,
+  bikeLight: 1,
+  fleeceJacket: 2,
+  tShirt: 3,
+  tShirtRed: 4,
+  Onesie: 5,
 }
 const personalData = {
   firstName: faker.person.firstName(),
@@ -10,16 +15,52 @@ const personalData = {
 }
 
 describe("Checkout", () => {
-  beforeEach("Visit", () => {
+  beforeEach("Visit and Login", () => {
     cy.login()
   })
-  it("Success checkout", () => {
-    cy.addProductToCart(product.dataTestName)
-    cy.fillPersonalDataAtCheckout(
-      personalData.firstName,
-      personalData.lastName,
-      personalData.postalCode,
-    )
-    cy.validateCheckoutInfosAndFinishOrder()
+  context("Success Checkout", () => {
+    it("Buy one product", () => {
+      const productsList = [products.backpack]
+      cy.addProductToCart(productsList)
+      cy.goToCart()
+      cy.fillPersonalDataAtCheckout(
+        personalData.firstName,
+        personalData.lastName,
+        personalData.postalCode,
+      )
+      cy.validateCheckoutInfos(productsList)
+      cy.finishOrder()
+    })
+    it("Buy two products", () => {
+      const productsList = [products.backpack, products.fleeceJacket]
+      cy.addProductToCart(productsList)
+      cy.goToCart()
+      cy.fillPersonalDataAtCheckout(
+        personalData.firstName,
+        personalData.lastName,
+        personalData.postalCode,
+      )
+      cy.validateCheckoutInfos(productsList)
+      cy.finishOrder()
+    })
+    it("Buy all products", () => {
+      const productsList = [
+        products.backpack,
+        products.fleeceJacket,
+        products.Onesie,
+        products.bikeLight,
+        products.tShirt,
+        products.tShirtRed,
+      ]
+      cy.addProductToCart(productsList)
+      cy.goToCart()
+      cy.fillPersonalDataAtCheckout(
+        personalData.firstName,
+        personalData.lastName,
+        personalData.postalCode,
+      )
+      cy.validateCheckoutInfos(productsList)
+      cy.finishOrder()
+    })
   })
 })

cypress/fixtures/products.json

@@ -0,0 +1,38 @@
+[
+  {
+    "productName": "Sauce Labs Backpack",
+    "productDescription": "carry.allTheThings() with the sleek, streamlined Sly Pack that melds uncompromising style with unequaled laptop and tablet protection.",
+    "productPrice": "$29.99",
+    "dataTestName": "sauce-labs-backpack"
+  },
+  {
+    "productName": "Sauce Labs Bike Light",
+    "productDescription": "A red light isn't the desired state in testing but it sure helps when riding your bike at night. Water-resistant with 3 lighting modes, 1 AAA battery included.",
+    "productPrice": "$9.99",
+    "dataTestName": "sauce-labs-bike-light"
+  },
+  {
+    "productName": "Sauce Labs Fleece Jacket",
+    "productDescription": "It's not every day that you come across a midweight quarter-zip fleece jacket capable of handling everything from a relaxing day outdoors to a busy day at the office.",
+    "productPrice": "$49.99",
+    "dataTestName": "sauce-labs-fleece-jacket"
+  },
+  {
+    "productName": "Sauce Labs Bolt T-Shirt",
+    "productDescription": "Get your testing superhero on with the Sauce Labs bolt T-shirt. From American Apparel, 100% ringspun combed cotton, heather gray with red bolt.",
+    "productPrice": "$15.99",
+    "dataTestName": "sauce-labs-bolt-t-shirt"
+  },
+  {
+    "productName": "Test.allTheThings() T-Shirt (Red)",
+    "productDescription": "This classic Sauce Labs t-shirt is perfect to wear when cozying up to your keyboard to automate a few tests. Super-soft and comfy ringspun combed cotton.",
+    "productPrice": "$15.99",
+    "dataTestName": "test.allthethings()-t-shirt-(red)"
+  },
+  {
+    "productName": "Sauce Labs Onesie",
+    "productDescription": "Rib snap infant onesie for the junior automation engineer in development. Reinforced 3-snap bottom closure, two-needle hemmed sleeved and bottom won't unravel.",
+    "productPrice": "$7.99",
+    "dataTestName": "sauce-labs-onesie"
+  }
+]

cypress/support/commands.js

@@ -59,12 +59,20 @@ Cypress.Commands.add("login", (user, password) => {
 
 // Checkout
 
-Cypress.Commands.add("addProductToCart", (dataTestProductName) => {
-  cy.get(`[data-test="add-to-cart-sauce-labs-${dataTestProductName}"]`).click()
+Cypress.Commands.add("addProductToCart", (productNumberList) => {
+  for (let index in productNumberList) {
+    cy.fixture("products.json").then((products) => {
+      const product = products[productNumberList[index]]
+      cy.log(product.productName)
+      cy.get(`[data-test="add-to-cart-${product.dataTestName}"]`).click()
+    })
+  }
+})
+
+Cypress.Commands.add("goToCart", () => {
   cy.get(".shopping_cart_link").click()
   cy.get('[data-test="checkout"]').click()
 })
-
 Cypress.Commands.add(
   "fillPersonalDataAtCheckout",
   (firstName, lastName, postalCode) => {
@@ -75,8 +83,46 @@ Cypress.Commands.add(
   },
 )
 
-Cypress.Commands.add("validateCheckoutInfosAndFinishOrder", () => {
-  cy.get(".inventory_item_name").should("have.text", "Sauce Labs Backpack")
+Cypress.Commands.add("validateCheckoutInfos", (productNumberList) => {
+  cy.fixture("products.json").then((products) => {
+    let productsList = []
+    let productNameList = []
+    let productDescriptionList = []
+    let productPriceList = []
+    for (let index in productNumberList) {
+      productsList.push(products[productNumberList[index]])
+      productNameList.push(productsList[index].productName)
+      productDescriptionList.push(productsList[index].productDescription)
+      productPriceList.push(productsList[index].productPrice)
+    }
+
+    cy.log("**Product Name**")
+    cy.get(".inventory_item_name")
+      .should("have.length", productNumberList.length)
+      .then(($els) => {
+        return Cypress._.map(Cypress.$.makeArray($els), "innerText")
+      })
+      .should("deep.equal", productNameList)
+
+    cy.log("**Product Desc**")
+    cy.get(".inventory_item_desc")
+      .should("have.length", productNumberList.length)
+      .then(($els) => {
+        // jQuery => Array => get "innerText" from each
+        return Cypress._.map(Cypress.$.makeArray($els), "innerText")
+      })
+      .should("deep.equal", productDescriptionList)
+
+    cy.log("**Product Price**")
+    cy.get(".inventory_item_price")
+      .should("have.length", productNumberList.length)
+      .then(($els) => {
+        // jQuery => Array => get "innerText" from each
+        return Cypress._.map(Cypress.$.makeArray($els), "innerText")
+      })
+      .should("deep.equal", productPriceList)
+  })
+
   cy.get(".summary_value_label").contains("SauceCard #31337")
   cy.get(".summary_value_label").contains("Free Pony Express Delivery!")
   cy.get(".summary_subtotal_label")
@@ -94,6 +140,8 @@ Cypress.Commands.add("validateCheckoutInfosAndFinishOrder", () => {
       "match",
       /Total: \${1,}([0-9]{1,}\.[0-9]{1,}|[0-9]{1,})\.([0-9]{2})/,
     )
+})
+Cypress.Commands.add("finishOrder", () => {
   cy.get('[data-test="finish"]').click()
   cy.get(".complete-header").contains("Thank you for your order!")
   cy.get(".complete-text").contains(

docs/plugins.md

@@ -4,7 +4,7 @@
 
 Generate massive amounts of fake (but realistic) data for testing and development. Webpage: [https://fakerjs.dev/](https://fakerjs.dev/)
 
-I'm using this plugin to fill in data like user, password and address.
+I'm using this plugin to fill in user, password and address data.
 
 ## Prettier
 
@@ -13,3 +13,9 @@ An opinionated code formatter. Webpage: [https://prettier.io/](https://prettier.
 I'm using this plugin together with the VSCode plugin.
 
 You can configure it as a pre-commit step, but I'm the only one working on this project, so I don't have the necessity.
+
+## Lodash
+
+A modern JavaScript utility library delivering modularity, performance & extras. Webpage: [https://lodash.com/](https://lodash.com/)
+
+I'm using this plugin in the checkout command to get the property "innerText". However, I can also use it to test Flaky Tests as the [Cypress documentation recommends](https://www.cypress.io/blog/2020/12/03/retry-rerun-repeat#repeat).

package.json

@@ -24,6 +24,7 @@
   "devDependencies": {
     "@faker-js/faker": "^8.2.0",
     "cypress": "^13.4.0",
+    "lodash": "^4.17.21",
     "prettier": "3.0.3"
   }
 }