From 117ffe9b169470e6b3c4f2fb5f3a5f3294bab34e Mon Sep 17 00:00:00 2001
From: muriukialex <alexmuriukimaina254@gmail.com>
Date: Fri, 16 Feb 2024 01:04:40 +0300
Subject: [PATCH] introduce prettier, format code using prettier

---
 .github/workflows/preview.yaml                |  12 +
 .github/workflows/production.yaml             |  12 +
 .prettierrc                                   |  11 +
 app/api/labs/[id]/route.ts                    |   2 +-
 app/globals.css                               |   4 +-
 app/home/page.tsx                             |  10 +-
 app/layout.tsx                                |   2 +-
 app/page.tsx                                  |   6 +-
 components/UI/Divider.tsx                     |   2 +-
 components/UI/Lab.tsx                         |  16 +-
 components/UI/UserLabs.tsx                    |  41 +--
 components/index.ts                           |   4 +-
 cypress/e2e/1-getting-started/todo.cy.js      |  78 +++---
 cypress/e2e/2-advanced-examples/actions.cy.js | 246 +++++++++---------
 .../e2e/2-advanced-examples/aliasing.cy.js    |  32 ++-
 .../e2e/2-advanced-examples/assertions.cy.js  | 123 +++++----
 .../e2e/2-advanced-examples/connectors.cy.js  |  62 +++--
 cypress/e2e/2-advanced-examples/cookies.cy.js | 120 ++++-----
 .../e2e/2-advanced-examples/cypress_api.cy.js | 192 +++++++-------
 cypress/e2e/2-advanced-examples/files.cy.js   |  60 ++---
 .../e2e/2-advanced-examples/location.cy.js    |  30 ++-
 cypress/e2e/2-advanced-examples/misc.cy.js    |  73 +++---
 .../e2e/2-advanced-examples/navigation.cy.js  |  40 +--
 .../network_requests.cy.js                    | 164 ++++++------
 .../e2e/2-advanced-examples/querying.cy.js    |  84 +++---
 .../spies_stubs_clocks.cy.js                  | 111 ++++----
 cypress/e2e/2-advanced-examples/storage.cy.js | 106 ++++----
 .../e2e/2-advanced-examples/traversal.cy.js   | 119 ++++-----
 .../e2e/2-advanced-examples/utilities.cy.js   |  65 ++---
 .../e2e/2-advanced-examples/viewport.cy.js    |  38 +--
 cypress/e2e/2-advanced-examples/waiting.cy.js |  22 +-
 cypress/e2e/2-advanced-examples/window.cy.js  |  16 +-
 cypress/fixtures/profile.json                 |   2 +-
 cypress/fixtures/users.json                   |   2 +-
 cypress/support/commands.ts                   |   2 +-
 cypress/support/e2e.ts                        |   4 +-
 lib/const.ts                                  |   1 -
 lib/labs.ts                                   |   2 +-
 lib/metadata-options.ts                       |  13 +-
 package-lock.json                             | 107 ++++++++
 package.json                                  |   3 +
 postcss.config.js                             |   2 +-
 service/requests.ts                           |   2 +-
 tailwind.config.ts                            |   6 +-
 44 files changed, 1131 insertions(+), 918 deletions(-)
 create mode 100644 .prettierrc

diff --git a/.github/workflows/preview.yaml b/.github/workflows/preview.yaml
index 41726ff..4b19eeb 100644
--- a/.github/workflows/preview.yaml
+++ b/.github/workflows/preview.yaml
@@ -7,6 +7,18 @@ on:
     branches-ignore:
       - main
 jobs:
+  Code Format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+       - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.12.1
+      - name: Format
+        run: npm run format
+
   Run Tests:
     runs-on: ubuntu-latest
     steps:
diff --git a/.github/workflows/production.yaml b/.github/workflows/production.yaml
index 9cb880a..1b04906 100644
--- a/.github/workflows/production.yaml
+++ b/.github/workflows/production.yaml
@@ -7,6 +7,18 @@ on:
     branches:
       - main
 jobs:
+  Code Format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+       - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.12.1
+      - name: Format
+        run: npm run format
+
   Run Tests:
     runs-on: ubuntu-latest
     steps:
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..190bea8
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "plugins": [
+    "prettier-plugin-organize-imports",
+    "prettier-plugin-tailwindcss"
+  ],
+  "trailingComma": "all",
+  "semi": false,
+  "singleQuote": false,
+  "useTabs": false,
+  "tabWidth": 2
+}
diff --git a/app/api/labs/[id]/route.ts b/app/api/labs/[id]/route.ts
index 11e1621..d5085b3 100644
--- a/app/api/labs/[id]/route.ts
+++ b/app/api/labs/[id]/route.ts
@@ -1,6 +1,6 @@
-import { NextResponse } from "next/server"
 import Lab from "@/models/Lab"
 import { LabRequestType } from "@/types/Requests"
+import { NextResponse } from "next/server"
 
 export async function PUT(
   req: Request,
diff --git a/app/globals.css b/app/globals.css
index 3c93daf..753a5fc 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -33,9 +33,9 @@ body {
 }
 
 h1 {
-  @apply text-2xl sm:text-4xl font-bold mt-4 mb-4 dark:text-white text-gray-500;
+  @apply mb-4 mt-4 text-2xl font-bold text-gray-500 sm:text-4xl dark:text-white;
 }
 
 h2 {
-  @apply sm:text-xl text-lg mt-2 mb-2;
+  @apply mb-2 mt-2 text-lg sm:text-xl;
 }
diff --git a/app/home/page.tsx b/app/home/page.tsx
index d97d3e5..5ecbd10 100644
--- a/app/home/page.tsx
+++ b/app/home/page.tsx
@@ -1,10 +1,10 @@
 "use client"
 
+import { UserLabs } from "@/components"
+import { useUserLabsData } from "@/hooks"
+import { ButtonStatusType } from "@/types/Common"
 import { signOut, useSession } from "next-auth/react"
 import { useState } from "react"
-import { ButtonStatusType } from "@/types/Common"
-import { useUserLabsData } from "@/hooks"
-import { UserLabs } from "@/components"
 
 const HomePage = () => {
   const { data: userData } = useSession()
@@ -32,7 +32,7 @@ const HomePage = () => {
   }
 
   return (
-    <div className="sm:w-[500px] m-auto mt-8 p-4">
+    <div className="m-auto mt-8 p-4 sm:w-[500px]">
       <div className="flex items-center justify-between">
         <div>
           <h1>AWS r/Start Labs</h1>
@@ -40,7 +40,7 @@ const HomePage = () => {
         <div>
           <button
             data-test="sign-out"
-            className="p-1 px-4 rounded hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+            className="rounded p-1 px-4 hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
             disabled={buttonStatus.status === "submitting"}
             onClick={() => handleSignOut()}
           >
diff --git a/app/layout.tsx b/app/layout.tsx
index 09406ce..bb82f2e 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,7 +1,7 @@
+import { metaDataOptions } from "@/lib/metadata-options"
 import type { Metadata } from "next"
 import { Inter } from "next/font/google"
 import "./globals.css"
-import { metaDataOptions } from "@/lib/metadata-options"
 
 import { Analytics } from "@vercel/analytics/react"
 
diff --git a/app/page.tsx b/app/page.tsx
index dc08b48..089c721 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,9 +1,9 @@
 "use client"
 
+import { GoogleIcon } from "@/components"
+import { ButtonStatusType } from "@/types/Common"
 import { signIn } from "next-auth/react"
 import { useState } from "react"
-import { ButtonStatusType } from "@/types/Common"
-import { GoogleIcon } from "@/components"
 
 const LoginPage = () => {
   const [buttonStatus, setButtonStatus] = useState<ButtonStatusType>({
@@ -35,7 +35,7 @@ const LoginPage = () => {
             data-test="sign-in-with-google"
             onClick={() => handleSignIn()}
             disabled={buttonStatus.status === "submitting"}
-            className="w-full rounded-md border bg-white dark:bg-black dark:text-white p-4 text-center text-sm text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            className="w-full rounded-md border bg-white p-4 text-center text-sm text-gray-500 hover:bg-gray-100 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-black dark:text-white dark:hover:bg-gray-900"
           >
             <GoogleIcon className="mr-2 inline size-5" />
             {buttonStatus.status === "submitting"
diff --git a/components/UI/Divider.tsx b/components/UI/Divider.tsx
index fff1e7f..7f72ef1 100644
--- a/components/UI/Divider.tsx
+++ b/components/UI/Divider.tsx
@@ -1,5 +1,5 @@
 const Divider = () => {
-  return <hr className="dark:bg-gray-500 bg-white" />
+  return <hr className="bg-white dark:bg-gray-500" />
 }
 
 export default Divider
diff --git a/components/UI/Lab.tsx b/components/UI/Lab.tsx
index 84de54d..708f37d 100644
--- a/components/UI/Lab.tsx
+++ b/components/UI/Lab.tsx
@@ -1,10 +1,10 @@
 import type { LabType } from "@/lib/labs"
-import toast from "react-hot-toast"
-import { CheckMark } from ".."
-import { useState, useEffect, ChangeEvent } from "react"
-import { ErrorResponse, LabResponseType } from "@/types/Responses"
 import { saveLab, updateLab } from "@/service/requests"
 import { LabRequestType } from "@/types/Requests"
+import { ErrorResponse, LabResponseType } from "@/types/Responses"
+import { ChangeEvent, useEffect, useState } from "react"
+import toast from "react-hot-toast"
+import { CheckMark } from ".."
 
 interface LabProps {
   email?: string | null
@@ -92,23 +92,23 @@ const Lab = ({ email, lab, data, mutate }: LabProps) => {
   return (
     <div className="flex items-center">
       <label
-        className="relative flex items-center p-3 rounded-full cursor-pointer"
+        className="relative flex cursor-pointer items-center rounded-full p-3"
         htmlFor={lab.name}
       >
         <input
           data-test={`lab-checkbox-${lab.labId}`}
           type="checkbox"
-          className="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-gray-900 checked:bg-blue-700 checked:before:bg-gray-900 dark:checked:border-gray-200 dark:checked:before:bg-gray-200 hover:before:opacity-10"
+          className="before:content[''] border-blue-gray-200 before:bg-blue-gray-500 peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border transition-all before:absolute before:left-2/4 before:top-2/4 before:block before:h-12 before:w-12 before:-translate-x-2/4 before:-translate-y-2/4 before:rounded-full before:opacity-0 before:transition-opacity checked:border-gray-900 checked:bg-blue-700 checked:before:bg-gray-900 hover:before:opacity-10 dark:checked:border-gray-200 dark:checked:before:bg-gray-200"
           id={lab.name}
           onChange={(e) => handleTrackLab({ event: e, lab })}
           checked={completed}
         />
-        <span className="absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
+        <span className="pointer-events-none absolute left-2/4 top-2/4 -translate-x-2/4 -translate-y-2/4 text-white opacity-0 transition-opacity peer-checked:opacity-100">
           <CheckMark />
         </span>
       </label>
       <label
-        className="mt-px font-light text-gray-200 cursor-pointer select-none"
+        className="mt-px cursor-pointer select-none font-light text-gray-200"
         htmlFor={lab.name}
       >
         {lab.name}
diff --git a/components/UI/UserLabs.tsx b/components/UI/UserLabs.tsx
index 544825c..233fbd1 100644
--- a/components/UI/UserLabs.tsx
+++ b/components/UI/UserLabs.tsx
@@ -1,8 +1,20 @@
+import {
+  weekEight,
+  weekEleven,
+  weekFive,
+  weekFour,
+  weekNine,
+  weekOne,
+  weekSeven,
+  weekSix,
+  weekTen,
+  weekThree,
+  weekTwo,
+} from "@/lib/labs"
 import { LoadingState } from "@/types/Common"
 import { ErrorResponse, LabResponseType } from "@/types/Responses"
-import Divider from "./Divider"
-import { weekOne, weekTwo, weekThree, weekFour, weekFive, weekSix, weekSeven, weekEight, weekNine, weekTen, weekEleven } from "@/lib/labs"
 import { Session } from "next-auth"
+import Divider from "./Divider"
 import Lab from "./Lab"
 
 interface UserLabsProps {
@@ -30,7 +42,7 @@ const UserLabs = ({
       <div>
         <button
           onClick={() => mutate()}
-          className="p-1 px-4 rounded hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+          className="rounded p-1 px-4 hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
         >
           Refresh your labs
         </button>
@@ -41,7 +53,7 @@ const UserLabs = ({
   return (
     <div>
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 1</h2>
         {weekOne.map((lab) => (
           <Lab
@@ -55,7 +67,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 2</h2>
         {weekTwo.map((lab) => (
           <Lab
@@ -69,7 +81,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 3</h2>
         {weekThree.map((lab) => (
           <Lab
@@ -83,7 +95,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 4</h2>
         {weekFour.map((lab) => (
           <Lab
@@ -97,7 +109,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 5</h2>
         {weekFive.map((lab) => (
           <Lab
@@ -111,7 +123,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 6</h2>
         {weekSix.map((lab) => (
           <Lab
@@ -125,7 +137,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 7</h2>
         {weekSeven.map((lab) => (
           <Lab
@@ -139,7 +151,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 8</h2>
         {weekEight.map((lab) => (
           <Lab
@@ -153,7 +165,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 9</h2>
         {weekNine.map((lab) => (
           <Lab
@@ -167,7 +179,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 10</h2>
         {weekTen.map((lab) => (
           <Lab
@@ -181,7 +193,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 11</h2>
         {weekEleven.map((lab) => (
           <Lab
@@ -193,7 +205,6 @@ const UserLabs = ({
           />
         ))}
       </div>
-
     </div>
   )
 }
diff --git a/components/index.ts b/components/index.ts
index 97e3e3f..aa3b87e 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -1,4 +1,4 @@
-import { GoogleIcon, CheckMark } from "./Icons"
+import { CheckMark, GoogleIcon } from "./Icons"
 import { Divider, UserLabs } from "./UI"
 
-export { GoogleIcon, Divider, CheckMark, UserLabs }
+export { CheckMark, Divider, GoogleIcon, UserLabs }
diff --git a/cypress/e2e/1-getting-started/todo.cy.js b/cypress/e2e/1-getting-started/todo.cy.js
index 4768ff9..d4516b2 100644
--- a/cypress/e2e/1-getting-started/todo.cy.js
+++ b/cypress/e2e/1-getting-started/todo.cy.js
@@ -11,32 +11,32 @@
 // please read our getting started guide:
 // https://on.cypress.io/introduction-to-cypress
 
-describe('example to-do app', () => {
+describe("example to-do app", () => {
   beforeEach(() => {
     // Cypress starts out with a blank slate for each test
     // so we must tell it to visit our website with the `cy.visit()` command.
     // Since we want to visit the same URL at the start of all our tests,
     // we include it in our beforeEach function so that it runs before each test
-    cy.visit('https://example.cypress.io/todo')
+    cy.visit("https://example.cypress.io/todo")
   })
 
-  it('displays two todo items by default', () => {
+  it("displays two todo items by default", () => {
     // We use the `cy.get()` command to get all elements that match the selector.
     // Then, we use `should` to assert that there are two matched items,
     // which are the two default items.
-    cy.get('.todo-list li').should('have.length', 2)
+    cy.get(".todo-list li").should("have.length", 2)
 
     // We can go even further and check that the default todos each contain
     // the correct text. We use the `first` and `last` functions
     // to get just the first and last matched elements individually,
     // and then perform an assertion with `should`.
-    cy.get('.todo-list li').first().should('have.text', 'Pay electric bill')
-    cy.get('.todo-list li').last().should('have.text', 'Walk the dog')
+    cy.get(".todo-list li").first().should("have.text", "Pay electric bill")
+    cy.get(".todo-list li").last().should("have.text", "Walk the dog")
   })
 
-  it('can add new todo items', () => {
+  it("can add new todo items", () => {
     // We'll store our item text in a variable so we can reuse it
-    const newItem = 'Feed the cat'
+    const newItem = "Feed the cat"
 
     // Let's get the input element and use the `type` command to
     // input our new list item. After typing the content of our item,
@@ -44,29 +44,29 @@ describe('example to-do app', () => {
     // This input has a data-test attribute so we'll use that to select the
     // element in accordance with best practices:
     // https://on.cypress.io/selecting-elements
-    cy.get('[data-test=new-todo]').type(`${newItem}{enter}`)
+    cy.get("[data-test=new-todo]").type(`${newItem}{enter}`)
 
     // Now that we've typed our new item, let's check that it actually was added to the list.
     // Since it's the newest item, it should exist as the last element in the list.
     // In addition, with the two default items, we should have a total of 3 elements in the list.
     // Since assertions yield the element that was asserted on,
     // we can chain both of these assertions together into a single statement.
-    cy.get('.todo-list li')
-      .should('have.length', 3)
+    cy.get(".todo-list li")
+      .should("have.length", 3)
       .last()
-      .should('have.text', newItem)
+      .should("have.text", newItem)
   })
 
-  it('can check off an item as completed', () => {
+  it("can check off an item as completed", () => {
     // In addition to using the `get` command to get an element by selector,
     // we can also use the `contains` command to get an element by its contents.
     // However, this will yield the <label>, which is lowest-level element that contains the text.
     // In order to check the item, we'll find the <input> element for this <label>
     // by traversing up the dom to the parent element. From there, we can `find`
     // the child checkbox <input> element and use the `check` command to check it.
-    cy.contains('Pay electric bill')
+    cy.contains("Pay electric bill")
       .parent()
-      .find('input[type=checkbox]')
+      .find("input[type=checkbox]")
       .check()
 
     // Now that we've checked the button, we can go ahead and make sure
@@ -74,70 +74,70 @@ describe('example to-do app', () => {
     // Again we'll use `contains` to find the <label> element and then use the `parents` command
     // to traverse multiple levels up the dom until we find the corresponding <li> element.
     // Once we get that element, we can assert that it has the completed class.
-    cy.contains('Pay electric bill')
-      .parents('li')
-      .should('have.class', 'completed')
+    cy.contains("Pay electric bill")
+      .parents("li")
+      .should("have.class", "completed")
   })
 
-  context('with a checked task', () => {
+  context("with a checked task", () => {
     beforeEach(() => {
       // We'll take the command we used above to check off an element
       // Since we want to perform multiple tests that start with checking
       // one element, we put it in the beforeEach hook
       // so that it runs at the start of every test.
-      cy.contains('Pay electric bill')
+      cy.contains("Pay electric bill")
         .parent()
-        .find('input[type=checkbox]')
+        .find("input[type=checkbox]")
         .check()
     })
 
-    it('can filter for uncompleted tasks', () => {
+    it("can filter for uncompleted tasks", () => {
       // We'll click on the "active" button in order to
       // display only incomplete items
-      cy.contains('Active').click()
+      cy.contains("Active").click()
 
       // After filtering, we can assert that there is only the one
       // incomplete item in the list.
-      cy.get('.todo-list li')
-        .should('have.length', 1)
+      cy.get(".todo-list li")
+        .should("have.length", 1)
         .first()
-        .should('have.text', 'Walk the dog')
+        .should("have.text", "Walk the dog")
 
       // For good measure, let's also assert that the task we checked off
       // does not exist on the page.
-      cy.contains('Pay electric bill').should('not.exist')
+      cy.contains("Pay electric bill").should("not.exist")
     })
 
-    it('can filter for completed tasks', () => {
+    it("can filter for completed tasks", () => {
       // We can perform similar steps as the test above to ensure
       // that only completed tasks are shown
-      cy.contains('Completed').click()
+      cy.contains("Completed").click()
 
-      cy.get('.todo-list li')
-        .should('have.length', 1)
+      cy.get(".todo-list li")
+        .should("have.length", 1)
         .first()
-        .should('have.text', 'Pay electric bill')
+        .should("have.text", "Pay electric bill")
 
-      cy.contains('Walk the dog').should('not.exist')
+      cy.contains("Walk the dog").should("not.exist")
     })
 
-    it('can delete all completed tasks', () => {
+    it("can delete all completed tasks", () => {
       // First, let's click the "Clear completed" button
       // `contains` is actually serving two purposes here.
       // First, it's ensuring that the button exists within the dom.
       // This button only appears when at least one task is checked
       // so this command is implicitly verifying that it does exist.
       // Second, it selects the button so we can click it.
-      cy.contains('Clear completed').click()
+      cy.contains("Clear completed").click()
 
       // Then we can make sure that there is only one element
       // in the list and our element does not exist
-      cy.get('.todo-list li')
-        .should('have.length', 1)
-        .should('not.have.text', 'Pay electric bill')
+      cy.get(".todo-list li")
+        .should("have.length", 1)
+        .should("not.have.text", "Pay electric bill")
 
       // Finally, make sure that the clear button no longer exists.
-      cy.contains('Clear completed').should('not.exist')
+      cy.contains("Clear completed").should("not.exist")
     })
   })
 })
diff --git a/cypress/e2e/2-advanced-examples/actions.cy.js b/cypress/e2e/2-advanced-examples/actions.cy.js
index 0926379..72b1281 100644
--- a/cypress/e2e/2-advanced-examples/actions.cy.js
+++ b/cypress/e2e/2-advanced-examples/actions.cy.js
@@ -1,72 +1,80 @@
 /// <reference types="cypress" />
 
-context('Actions', () => {
+context("Actions", () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/actions')
+    cy.visit("https://example.cypress.io/commands/actions")
   })
 
   // https://on.cypress.io/interacting-with-elements
 
-  it('.type() - type into a DOM element', () => {
+  it(".type() - type into a DOM element", () => {
     // https://on.cypress.io/type
-    cy.get('.action-email')
-      .type('fake@email.com').should('have.value', 'fake@email.com')
+    cy.get(".action-email")
+      .type("fake@email.com")
+      .should("have.value", "fake@email.com")
 
       // .type() with special character sequences
-      .type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
-      .type('{del}{selectall}{backspace}')
+      .type("{leftarrow}{rightarrow}{uparrow}{downarrow}")
+      .type("{del}{selectall}{backspace}")
 
       // .type() with key modifiers
-      .type('{alt}{option}') //these are equivalent
-      .type('{ctrl}{control}') //these are equivalent
-      .type('{meta}{command}{cmd}') //these are equivalent
-      .type('{shift}')
+      .type("{alt}{option}") //these are equivalent
+      .type("{ctrl}{control}") //these are equivalent
+      .type("{meta}{command}{cmd}") //these are equivalent
+      .type("{shift}")
 
       // Delay each keypress by 0.1 sec
-      .type('slow.typing@email.com', { delay: 100 })
-      .should('have.value', 'slow.typing@email.com')
+      .type("slow.typing@email.com", { delay: 100 })
+      .should("have.value", "slow.typing@email.com")
 
-    cy.get('.action-disabled')
+    cy.get(".action-disabled")
       // Ignore error checking prior to type
       // like whether the input is visible or disabled
-      .type('disabled error checking', { force: true })
-      .should('have.value', 'disabled error checking')
+      .type("disabled error checking", { force: true })
+      .should("have.value", "disabled error checking")
   })
 
-  it('.focus() - focus on a DOM element', () => {
+  it(".focus() - focus on a DOM element", () => {
     // https://on.cypress.io/focus
-    cy.get('.action-focus').focus()
-      .should('have.class', 'focus')
-      .prev().should('have.attr', 'style', 'color: orange;')
+    cy.get(".action-focus")
+      .focus()
+      .should("have.class", "focus")
+      .prev()
+      .should("have.attr", "style", "color: orange;")
   })
 
-  it('.blur() - blur off a DOM element', () => {
+  it(".blur() - blur off a DOM element", () => {
     // https://on.cypress.io/blur
-    cy.get('.action-blur').type('About to blur').blur()
-      .should('have.class', 'error')
-      .prev().should('have.attr', 'style', 'color: red;')
+    cy.get(".action-blur")
+      .type("About to blur")
+      .blur()
+      .should("have.class", "error")
+      .prev()
+      .should("have.attr", "style", "color: red;")
   })
 
-  it('.clear() - clears an input or textarea element', () => {
+  it(".clear() - clears an input or textarea element", () => {
     // https://on.cypress.io/clear
-    cy.get('.action-clear').type('Clear this text')
-      .should('have.value', 'Clear this text')
+    cy.get(".action-clear")
+      .type("Clear this text")
+      .should("have.value", "Clear this text")
       .clear()
-      .should('have.value', '')
+      .should("have.value", "")
   })
 
-  it('.submit() - submit a form', () => {
+  it(".submit() - submit a form", () => {
     // https://on.cypress.io/submit
-    cy.get('.action-form')
-      .find('[type="text"]').type('HALFOFF')
+    cy.get(".action-form").find('[type="text"]').type("HALFOFF")
 
-    cy.get('.action-form').submit()
-      .next().should('contain', 'Your form has been submitted!')
+    cy.get(".action-form")
+      .submit()
+      .next()
+      .should("contain", "Your form has been submitted!")
   })
 
-  it('.click() - click on a DOM element', () => {
+  it(".click() - click on a DOM element", () => {
     // https://on.cypress.io/click
-    cy.get('.action-btn').click()
+    cy.get(".action-btn").click()
 
     // You can click on 9 specific positions of an element:
     //  -----------------------------------
@@ -82,21 +90,21 @@ context('Actions', () => {
     //  -----------------------------------
 
     // clicking in the center of the element is the default
-    cy.get('#action-canvas').click()
+    cy.get("#action-canvas").click()
 
-    cy.get('#action-canvas').click('topLeft')
-    cy.get('#action-canvas').click('top')
-    cy.get('#action-canvas').click('topRight')
-    cy.get('#action-canvas').click('left')
-    cy.get('#action-canvas').click('right')
-    cy.get('#action-canvas').click('bottomLeft')
-    cy.get('#action-canvas').click('bottom')
-    cy.get('#action-canvas').click('bottomRight')
+    cy.get("#action-canvas").click("topLeft")
+    cy.get("#action-canvas").click("top")
+    cy.get("#action-canvas").click("topRight")
+    cy.get("#action-canvas").click("left")
+    cy.get("#action-canvas").click("right")
+    cy.get("#action-canvas").click("bottomLeft")
+    cy.get("#action-canvas").click("bottom")
+    cy.get("#action-canvas").click("bottomRight")
 
     // .click() accepts an x and y coordinate
     // that controls where the click occurs :)
 
-    cy.get('#action-canvas')
+    cy.get("#action-canvas")
       .click(80, 75) // click 80px on x coord and 75px on y coord
       .click(170, 75)
       .click(80, 165)
@@ -106,145 +114,150 @@ context('Actions', () => {
       .click(170, 165)
 
     // click multiple elements by passing multiple: true
-    cy.get('.action-labels>.label').click({ multiple: true })
+    cy.get(".action-labels>.label").click({ multiple: true })
 
     // Ignore error checking prior to clicking
-    cy.get('.action-opacity>.btn').click({ force: true })
+    cy.get(".action-opacity>.btn").click({ force: true })
   })
 
-  it('.dblclick() - double click on a DOM element', () => {
+  it(".dblclick() - double click on a DOM element", () => {
     // https://on.cypress.io/dblclick
 
     // Our app has a listener on 'dblclick' event in our 'scripts.js'
     // that hides the div and shows an input on double click
-    cy.get('.action-div').dblclick().should('not.be.visible')
-    cy.get('.action-input-hidden').should('be.visible')
+    cy.get(".action-div").dblclick().should("not.be.visible")
+    cy.get(".action-input-hidden").should("be.visible")
   })
 
-  it('.rightclick() - right click on a DOM element', () => {
+  it(".rightclick() - right click on a DOM element", () => {
     // https://on.cypress.io/rightclick
 
     // Our app has a listener on 'contextmenu' event in our 'scripts.js'
     // that hides the div and shows an input on right click
-    cy.get('.rightclick-action-div').rightclick().should('not.be.visible')
-    cy.get('.rightclick-action-input-hidden').should('be.visible')
+    cy.get(".rightclick-action-div").rightclick().should("not.be.visible")
+    cy.get(".rightclick-action-input-hidden").should("be.visible")
   })
 
-  it('.check() - check a checkbox or radio element', () => {
+  it(".check() - check a checkbox or radio element", () => {
     // https://on.cypress.io/check
 
     // By default, .check() will check all
     // matching checkbox or radio elements in succession, one after another
-    cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]')
-      .check().should('be.checked')
+    cy.get('.action-checkboxes [type="checkbox"]')
+      .not("[disabled]")
+      .check()
+      .should("be.checked")
 
-    cy.get('.action-radios [type="radio"]').not('[disabled]')
-      .check().should('be.checked')
+    cy.get('.action-radios [type="radio"]')
+      .not("[disabled]")
+      .check()
+      .should("be.checked")
 
     // .check() accepts a value argument
-    cy.get('.action-radios [type="radio"]')
-      .check('radio1').should('be.checked')
+    cy.get('.action-radios [type="radio"]').check("radio1").should("be.checked")
 
     // .check() accepts an array of values
     cy.get('.action-multiple-checkboxes [type="checkbox"]')
-      .check(['checkbox1', 'checkbox2']).should('be.checked')
+      .check(["checkbox1", "checkbox2"])
+      .should("be.checked")
 
     // Ignore error checking prior to checking
-    cy.get('.action-checkboxes [disabled]')
-      .check({ force: true }).should('be.checked')
+    cy.get(".action-checkboxes [disabled]")
+      .check({ force: true })
+      .should("be.checked")
 
     cy.get('.action-radios [type="radio"]')
-      .check('radio3', { force: true }).should('be.checked')
+      .check("radio3", { force: true })
+      .should("be.checked")
   })
 
-  it('.uncheck() - uncheck a checkbox element', () => {
+  it(".uncheck() - uncheck a checkbox element", () => {
     // https://on.cypress.io/uncheck
 
     // By default, .uncheck() will uncheck all matching
     // checkbox elements in succession, one after another
     cy.get('.action-check [type="checkbox"]')
-      .not('[disabled]')
-      .uncheck().should('not.be.checked')
+      .not("[disabled]")
+      .uncheck()
+      .should("not.be.checked")
 
     // .uncheck() accepts a value argument
     cy.get('.action-check [type="checkbox"]')
-      .check('checkbox1')
-      .uncheck('checkbox1').should('not.be.checked')
+      .check("checkbox1")
+      .uncheck("checkbox1")
+      .should("not.be.checked")
 
     // .uncheck() accepts an array of values
     cy.get('.action-check [type="checkbox"]')
-      .check(['checkbox1', 'checkbox3'])
-      .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked')
+      .check(["checkbox1", "checkbox3"])
+      .uncheck(["checkbox1", "checkbox3"])
+      .should("not.be.checked")
 
     // Ignore error checking prior to unchecking
-    cy.get('.action-check [disabled]')
-      .uncheck({ force: true }).should('not.be.checked')
+    cy.get(".action-check [disabled]")
+      .uncheck({ force: true })
+      .should("not.be.checked")
   })
 
-  it('.select() - select an option in a <select> element', () => {
+  it(".select() - select an option in a <select> element", () => {
     // https://on.cypress.io/select
 
     // at first, no option should be selected
-    cy.get('.action-select')
-      .should('have.value', '--Select a fruit--')
+    cy.get(".action-select").should("have.value", "--Select a fruit--")
 
     // Select option(s) with matching text content
-    cy.get('.action-select').select('apples')
+    cy.get(".action-select").select("apples")
     // confirm the apples were selected
     // note that each value starts with "fr-" in our HTML
-    cy.get('.action-select').should('have.value', 'fr-apples')
+    cy.get(".action-select").should("have.value", "fr-apples")
 
-    cy.get('.action-select-multiple')
-      .select(['apples', 'oranges', 'bananas'])
+    cy.get(".action-select-multiple")
+      .select(["apples", "oranges", "bananas"])
       // when getting multiple values, invoke "val" method first
-      .invoke('val')
-      .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+      .invoke("val")
+      .should("deep.equal", ["fr-apples", "fr-oranges", "fr-bananas"])
 
     // Select option(s) with matching value
-    cy.get('.action-select').select('fr-bananas')
+    cy.get(".action-select")
+      .select("fr-bananas")
       // can attach an assertion right away to the element
-      .should('have.value', 'fr-bananas')
+      .should("have.value", "fr-bananas")
 
-    cy.get('.action-select-multiple')
-      .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
-      .invoke('val')
-      .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+    cy.get(".action-select-multiple")
+      .select(["fr-apples", "fr-oranges", "fr-bananas"])
+      .invoke("val")
+      .should("deep.equal", ["fr-apples", "fr-oranges", "fr-bananas"])
 
     // assert the selected values include oranges
-    cy.get('.action-select-multiple')
-      .invoke('val').should('include', 'fr-oranges')
+    cy.get(".action-select-multiple")
+      .invoke("val")
+      .should("include", "fr-oranges")
   })
 
-  it('.scrollIntoView() - scroll an element into view', () => {
+  it(".scrollIntoView() - scroll an element into view", () => {
     // https://on.cypress.io/scrollintoview
 
     // normally all of these buttons are hidden,
     // because they're not within
     // the viewable area of their parent
     // (we need to scroll to see them)
-    cy.get('#scroll-horizontal button')
-      .should('not.be.visible')
+    cy.get("#scroll-horizontal button").should("not.be.visible")
 
     // scroll the button into view, as if the user had scrolled
-    cy.get('#scroll-horizontal button').scrollIntoView()
-      .should('be.visible')
+    cy.get("#scroll-horizontal button").scrollIntoView().should("be.visible")
 
-    cy.get('#scroll-vertical button')
-      .should('not.be.visible')
+    cy.get("#scroll-vertical button").should("not.be.visible")
 
     // Cypress handles the scroll direction needed
-    cy.get('#scroll-vertical button').scrollIntoView()
-      .should('be.visible')
+    cy.get("#scroll-vertical button").scrollIntoView().should("be.visible")
 
-    cy.get('#scroll-both button')
-      .should('not.be.visible')
+    cy.get("#scroll-both button").should("not.be.visible")
 
     // Cypress knows to scroll to the right and down
-    cy.get('#scroll-both button').scrollIntoView()
-      .should('be.visible')
+    cy.get("#scroll-both button").scrollIntoView().should("be.visible")
   })
 
-  it('.trigger() - trigger an event on a DOM element', () => {
+  it(".trigger() - trigger an event on a DOM element", () => {
     // https://on.cypress.io/trigger
 
     // To interact with a range input (slider)
@@ -253,14 +266,15 @@ context('Actions', () => {
 
     // Here, we invoke jQuery's val() method to set
     // the value and trigger the 'change' event
-    cy.get('.trigger-input-range')
-      .invoke('val', 25)
-      .trigger('change')
-      .get('input[type=range]').siblings('p')
-      .should('have.text', '25')
+    cy.get(".trigger-input-range")
+      .invoke("val", 25)
+      .trigger("change")
+      .get("input[type=range]")
+      .siblings("p")
+      .should("have.text", "25")
   })
 
-  it('cy.scrollTo() - scroll the window or element to a position', () => {
+  it("cy.scrollTo() - scroll the window or element to a position", () => {
     // https://on.cypress.io/scrollto
 
     // You can scroll to 9 specific positions of an element:
@@ -278,22 +292,22 @@ context('Actions', () => {
 
     // if you chain .scrollTo() off of cy, we will
     // scroll the entire window
-    cy.scrollTo('bottom')
+    cy.scrollTo("bottom")
 
-    cy.get('#scrollable-horizontal').scrollTo('right')
+    cy.get("#scrollable-horizontal").scrollTo("right")
 
     // or you can scroll to a specific coordinate:
     // (x axis, y axis) in pixels
-    cy.get('#scrollable-vertical').scrollTo(250, 250)
+    cy.get("#scrollable-vertical").scrollTo(250, 250)
 
     // or you can scroll to a specific percentage
     // of the (width, height) of the element
-    cy.get('#scrollable-both').scrollTo('75%', '25%')
+    cy.get("#scrollable-both").scrollTo("75%", "25%")
 
     // control the easing of the scroll (default is 'swing')
-    cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' })
+    cy.get("#scrollable-vertical").scrollTo("center", { easing: "linear" })
 
     // control the duration of the scroll (in ms)
-    cy.get('#scrollable-both').scrollTo('center', { duration: 2000 })
+    cy.get("#scrollable-both").scrollTo("center", { duration: 2000 })
   })
 })
diff --git a/cypress/e2e/2-advanced-examples/aliasing.cy.js b/cypress/e2e/2-advanced-examples/aliasing.cy.js
index a02fb2b..e3ff437 100644
--- a/cypress/e2e/2-advanced-examples/aliasing.cy.js
+++ b/cypress/e2e/2-advanced-examples/aliasing.cy.js
@@ -1,39 +1,43 @@
 /// <reference types="cypress" />
 
-context('Aliasing', () => {
+context("Aliasing", () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/aliasing')
+    cy.visit("https://example.cypress.io/commands/aliasing")
   })
 
-  it('.as() - alias a DOM element for later use', () => {
+  it(".as() - alias a DOM element for later use", () => {
     // https://on.cypress.io/as
 
     // Alias a DOM element for use later
     // We don't have to traverse to the element
     // later in our code, we reference it with @
 
-    cy.get('.as-table').find('tbody>tr')
-      .first().find('td').first()
-      .find('button').as('firstBtn')
+    cy.get(".as-table")
+      .find("tbody>tr")
+      .first()
+      .find("td")
+      .first()
+      .find("button")
+      .as("firstBtn")
 
     // when we reference the alias, we place an
     // @ in front of its name
-    cy.get('@firstBtn').click()
+    cy.get("@firstBtn").click()
 
-    cy.get('@firstBtn')
-      .should('have.class', 'btn-success')
-      .and('contain', 'Changed')
+    cy.get("@firstBtn")
+      .should("have.class", "btn-success")
+      .and("contain", "Changed")
   })
 
-  it('.as() - alias a route for later use', () => {
+  it(".as() - alias a route for later use", () => {
     // Alias the route to wait for its response
-    cy.intercept('GET', '**/comments/*').as('getComment')
+    cy.intercept("GET", "**/comments/*").as("getComment")
 
     // we have code that gets a comment when
     // the button is clicked in scripts.js
-    cy.get('.network-btn').click()
+    cy.get(".network-btn").click()
 
     // https://on.cypress.io/wait
-    cy.wait('@getComment').its('response.statusCode').should('eq', 200)
+    cy.wait("@getComment").its("response.statusCode").should("eq", 200)
   })
 })
diff --git a/cypress/e2e/2-advanced-examples/assertions.cy.js b/cypress/e2e/2-advanced-examples/assertions.cy.js
index 79e3d0e..b0dd2c7 100644
--- a/cypress/e2e/2-advanced-examples/assertions.cy.js
+++ b/cypress/e2e/2-advanced-examples/assertions.cy.js
@@ -1,72 +1,72 @@
 /// <reference types="cypress" />
 
-context('Assertions', () => {
+context("Assertions", () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/assertions')
+    cy.visit("https://example.cypress.io/commands/assertions")
   })
 
-  describe('Implicit Assertions', () => {
-    it('.should() - make an assertion about the current subject', () => {
+  describe("Implicit Assertions", () => {
+    it(".should() - make an assertion about the current subject", () => {
       // https://on.cypress.io/should
-      cy.get('.assertion-table')
-        .find('tbody tr:last')
-        .should('have.class', 'success')
-        .find('td')
+      cy.get(".assertion-table")
+        .find("tbody tr:last")
+        .should("have.class", "success")
+        .find("td")
         .first()
         // checking the text of the <td> element in various ways
-        .should('have.text', 'Column content')
-        .should('contain', 'Column content')
-        .should('have.html', 'Column content')
+        .should("have.text", "Column content")
+        .should("contain", "Column content")
+        .should("have.html", "Column content")
         // chai-jquery uses "is()" to check if element matches selector
-        .should('match', 'td')
+        .should("match", "td")
         // to match text content against a regular expression
         // first need to invoke jQuery method text()
         // and then match using regular expression
-        .invoke('text')
-        .should('match', /column content/i)
+        .invoke("text")
+        .should("match", /column content/i)
 
       // a better way to check element's text content against a regular expression
       // is to use "cy.contains"
       // https://on.cypress.io/contains
-      cy.get('.assertion-table')
-        .find('tbody tr:last')
+      cy.get(".assertion-table")
+        .find("tbody tr:last")
         // finds first <td> element with text content matching regular expression
-        .contains('td', /column content/i)
-        .should('be.visible')
+        .contains("td", /column content/i)
+        .should("be.visible")
 
       // for more information about asserting element's text
       // see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-element’s-text-contents
     })
 
-    it('.and() - chain multiple assertions together', () => {
+    it(".and() - chain multiple assertions together", () => {
       // https://on.cypress.io/and
-      cy.get('.assertions-link')
-        .should('have.class', 'active')
-        .and('have.attr', 'href')
-        .and('include', 'cypress.io')
+      cy.get(".assertions-link")
+        .should("have.class", "active")
+        .and("have.attr", "href")
+        .and("include", "cypress.io")
     })
   })
 
-  describe('Explicit Assertions', () => {
+  describe("Explicit Assertions", () => {
     // https://on.cypress.io/assertions
-    it('expect - make an assertion about a specified subject', () => {
+    it("expect - make an assertion about a specified subject", () => {
       // We can use Chai's BDD style assertions
       expect(true).to.be.true
-      const o = { foo: 'bar' }
+      const o = { foo: "bar" }
 
       expect(o).to.equal(o)
-      expect(o).to.deep.equal({ foo: 'bar' })
+      expect(o).to.deep.equal({ foo: "bar" })
       // matching text using regular expression
-      expect('FooBar').to.match(/bar$/i)
+      expect("FooBar").to.match(/bar$/i)
     })
 
-    it('pass your own callback function to should()', () => {
+    it("pass your own callback function to should()", () => {
       // Pass a function to should that can have any number
       // of explicit assertions within it.
       // The ".should(cb)" function will be retried
       // automatically until it passes all your explicit assertions or times out.
-      cy.get('.assertions-p')
-        .find('p')
+      cy.get(".assertions-p")
+        .find("p")
         .should(($p) => {
           // https://on.cypress.io/$
           // return an array of texts from all of the p's
@@ -77,21 +77,21 @@ context('Assertions', () => {
           const paragraphs = texts.get()
 
           // array should have length of 3
-          expect(paragraphs, 'has 3 paragraphs').to.have.length(3)
+          expect(paragraphs, "has 3 paragraphs").to.have.length(3)
 
           // use second argument to expect(...) to provide clear
           // message with each assertion
-          expect(paragraphs, 'has expected text in each paragraph').to.deep.eq([
-            'Some text from first p',
-            'More text from second p',
-            'And even more text from third p',
+          expect(paragraphs, "has expected text in each paragraph").to.deep.eq([
+            "Some text from first p",
+            "More text from second p",
+            "And even more text from third p",
           ])
         })
     })
 
-    it('finds element by class name regex', () => {
-      cy.get('.docs-header')
-        .find('div')
+    it("finds element by class name regex", () => {
+      cy.get(".docs-header")
+        .find("div")
         // .should(cb) callback function will be retried
         .should(($div) => {
           expect($div).to.have.length(1)
@@ -103,17 +103,17 @@ context('Assertions', () => {
         // .then(cb) callback is not retried,
         // it either passes or fails
         .then(($div) => {
-          expect($div, 'text content').to.have.text('Introduction')
+          expect($div, "text content").to.have.text("Introduction")
         })
     })
 
-    it('can throw any error', () => {
-      cy.get('.docs-header')
-        .find('div')
+    it("can throw any error", () => {
+      cy.get(".docs-header")
+        .find("div")
         .should(($div) => {
           if ($div.length !== 1) {
             // you can throw your own errors
-            throw new Error('Did not find 1 element')
+            throw new Error("Did not find 1 element")
           }
 
           const className = $div[0].className
@@ -124,53 +124,52 @@ context('Assertions', () => {
         })
     })
 
-    it('matches unknown text between two elements', () => {
+    it("matches unknown text between two elements", () => {
       /**
        * Text from the first element.
        * @type {string}
-      */
+       */
       let text
 
       /**
        * Normalizes passed text,
        * useful before comparing text with spaces and different capitalization.
        * @param {string} s Text to normalize
-      */
-      const normalizeText = (s) => s.replace(/\s/g, '').toLowerCase()
+       */
+      const normalizeText = (s) => s.replace(/\s/g, "").toLowerCase()
 
-      cy.get('.two-elements')
-        .find('.first')
+      cy.get(".two-elements")
+        .find(".first")
         .then(($first) => {
           // save text from the first element
           text = normalizeText($first.text())
         })
 
-      cy.get('.two-elements')
-        .find('.second')
+      cy.get(".two-elements")
+        .find(".second")
         .should(($div) => {
           // we can massage text before comparing
           const secondText = normalizeText($div.text())
 
-          expect(secondText, 'second text').to.equal(text)
+          expect(secondText, "second text").to.equal(text)
         })
     })
 
-    it('assert - assert shape of an object', () => {
+    it("assert - assert shape of an object", () => {
       const person = {
-        name: 'Joe',
+        name: "Joe",
         age: 20,
       }
 
-      assert.isObject(person, 'value is object')
+      assert.isObject(person, "value is object")
     })
 
-    it('retries the should callback until assertions pass', () => {
-      cy.get('#random-number')
-        .should(($div) => {
-          const n = parseFloat($div.text())
+    it("retries the should callback until assertions pass", () => {
+      cy.get("#random-number").should(($div) => {
+        const n = parseFloat($div.text())
 
-          expect(n).to.be.gte(1).and.be.lte(10)
-        })
+        expect(n).to.be.gte(1).and.be.lte(10)
+      })
     })
   })
 })
diff --git a/cypress/e2e/2-advanced-examples/connectors.cy.js b/cypress/e2e/2-advanced-examples/connectors.cy.js
index f24cf52..4ef19c5 100644
--- a/cypress/e2e/2-advanced-examples/connectors.cy.js
+++ b/cypress/e2e/2-advanced-examples/connectors.cy.js
@@ -1,62 +1,60 @@
 /// <reference types="cypress" />
 
-context('Connectors', () => {
+context("Connectors", () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/connectors')
+    cy.visit("https://example.cypress.io/commands/connectors")
   })
 
-  it('.each() - iterate over an array of elements', () => {
+  it(".each() - iterate over an array of elements", () => {
     // https://on.cypress.io/each
-    cy.get('.connectors-each-ul>li')
-      .each(($el, index, $list) => {
-        console.log($el, index, $list)
-      })
+    cy.get(".connectors-each-ul>li").each(($el, index, $list) => {
+      console.log($el, index, $list)
+    })
   })
 
-  it('.its() - get properties on the current subject', () => {
+  it(".its() - get properties on the current subject", () => {
     // https://on.cypress.io/its
-    cy.get('.connectors-its-ul>li')
+    cy.get(".connectors-its-ul>li")
       // calls the 'length' property yielding that value
-      .its('length')
-      .should('be.gt', 2)
+      .its("length")
+      .should("be.gt", 2)
   })
 
-  it('.invoke() - invoke a function on the current subject', () => {
+  it(".invoke() - invoke a function on the current subject", () => {
     // our div is hidden in our script.js
     // $('.connectors-div').hide()
-    cy.get('.connectors-div').should('be.hidden')
+    cy.get(".connectors-div").should("be.hidden")
 
     // https://on.cypress.io/invoke
     // call the jquery method 'show' on the 'div.container'
-    cy.get('.connectors-div').invoke('show')
+    cy.get(".connectors-div").invoke("show")
 
-    cy.get('.connectors-div').should('be.visible')
+    cy.get(".connectors-div").should("be.visible")
   })
 
-  it('.spread() - spread an array as individual args to callback function', () => {
+  it(".spread() - spread an array as individual args to callback function", () => {
     // https://on.cypress.io/spread
-    const arr = ['foo', 'bar', 'baz']
+    const arr = ["foo", "bar", "baz"]
 
     cy.wrap(arr).spread((foo, bar, baz) => {
-      expect(foo).to.eq('foo')
-      expect(bar).to.eq('bar')
-      expect(baz).to.eq('baz')
+      expect(foo).to.eq("foo")
+      expect(bar).to.eq("bar")
+      expect(baz).to.eq("baz")
     })
   })
 
-  describe('.then()', () => {
-    it('invokes a callback function with the current subject', () => {
+  describe(".then()", () => {
+    it("invokes a callback function with the current subject", () => {
       // https://on.cypress.io/then
-      cy.get('.connectors-list > li')
-        .then(($lis) => {
-          expect($lis, '3 items').to.have.length(3)
-          expect($lis.eq(0), 'first item').to.contain('Walk the dog')
-          expect($lis.eq(1), 'second item').to.contain('Feed the cat')
-          expect($lis.eq(2), 'third item').to.contain('Write JavaScript')
-        })
+      cy.get(".connectors-list > li").then(($lis) => {
+        expect($lis, "3 items").to.have.length(3)
+        expect($lis.eq(0), "first item").to.contain("Walk the dog")
+        expect($lis.eq(1), "second item").to.contain("Feed the cat")
+        expect($lis.eq(2), "third item").to.contain("Write JavaScript")
+      })
     })
 
-    it('yields the returned value to the next command', () => {
+    it("yields the returned value to the next command", () => {
       cy.wrap(1)
         .then((num) => {
           expect(num).to.equal(1)
@@ -68,7 +66,7 @@ context('Connectors', () => {
         })
     })
 
-    it('yields the original subject without return', () => {
+    it("yields the original subject without return", () => {
       cy.wrap(1)
         .then((num) => {
           expect(num).to.equal(1)
@@ -80,7 +78,7 @@ context('Connectors', () => {
         })
     })
 
-    it('yields the value yielded by the last Cypress command inside', () => {
+    it("yields the value yielded by the last Cypress command inside", () => {
       cy.wrap(1)
         .then((num) => {
           expect(num).to.equal(1)
diff --git a/cypress/e2e/2-advanced-examples/cookies.cy.js b/cypress/e2e/2-advanced-examples/cookies.cy.js
index ddbb9b9..50b50bc 100644
--- a/cypress/e2e/2-advanced-examples/cookies.cy.js
+++ b/cypress/e2e/2-advanced-examples/cookies.cy.js
@@ -1,118 +1,122 @@
 /// <reference types="cypress" />
 
-context('Cookies', () => {
+context("Cookies", () => {
   beforeEach(() => {
     Cypress.Cookies.debug(true)
 
-    cy.visit('https://example.cypress.io/commands/cookies')
+    cy.visit("https://example.cypress.io/commands/cookies")
 
     // clear cookies again after visiting to remove
     // any 3rd party cookies picked up such as cloudflare
     cy.clearCookies()
   })
 
-  it('cy.getCookie() - get a browser cookie', () => {
+  it("cy.getCookie() - get a browser cookie", () => {
     // https://on.cypress.io/getcookie
-    cy.get('#getCookie .set-a-cookie').click()
+    cy.get("#getCookie .set-a-cookie").click()
 
     // cy.getCookie() yields a cookie object
-    cy.getCookie('token').should('have.property', 'value', '123ABC')
+    cy.getCookie("token").should("have.property", "value", "123ABC")
   })
 
-  it('cy.getCookies() - get browser cookies for the current domain', () => {
+  it("cy.getCookies() - get browser cookies for the current domain", () => {
     // https://on.cypress.io/getcookies
-    cy.getCookies().should('be.empty')
+    cy.getCookies().should("be.empty")
 
-    cy.get('#getCookies .set-a-cookie').click()
+    cy.get("#getCookies .set-a-cookie").click()
 
     // cy.getCookies() yields an array of cookies
-    cy.getCookies().should('have.length', 1).should((cookies) => {
-      // each cookie has these properties
-      expect(cookies[0]).to.have.property('name', 'token')
-      expect(cookies[0]).to.have.property('value', '123ABC')
-      expect(cookies[0]).to.have.property('httpOnly', false)
-      expect(cookies[0]).to.have.property('secure', false)
-      expect(cookies[0]).to.have.property('domain')
-      expect(cookies[0]).to.have.property('path')
-    })
+    cy.getCookies()
+      .should("have.length", 1)
+      .should((cookies) => {
+        // each cookie has these properties
+        expect(cookies[0]).to.have.property("name", "token")
+        expect(cookies[0]).to.have.property("value", "123ABC")
+        expect(cookies[0]).to.have.property("httpOnly", false)
+        expect(cookies[0]).to.have.property("secure", false)
+        expect(cookies[0]).to.have.property("domain")
+        expect(cookies[0]).to.have.property("path")
+      })
   })
 
-  it('cy.getAllCookies() - get all browser cookies', () => {
+  it("cy.getAllCookies() - get all browser cookies", () => {
     // https://on.cypress.io/getallcookies
-    cy.getAllCookies().should('be.empty')
+    cy.getAllCookies().should("be.empty")
 
-    cy.setCookie('key', 'value')
-    cy.setCookie('key', 'value', { domain: '.example.com' })
+    cy.setCookie("key", "value")
+    cy.setCookie("key", "value", { domain: ".example.com" })
 
     // cy.getAllCookies() yields an array of cookies
-    cy.getAllCookies().should('have.length', 2).should((cookies) => {
-      // each cookie has these properties
-      expect(cookies[0]).to.have.property('name', 'key')
-      expect(cookies[0]).to.have.property('value', 'value')
-      expect(cookies[0]).to.have.property('httpOnly', false)
-      expect(cookies[0]).to.have.property('secure', false)
-      expect(cookies[0]).to.have.property('domain')
-      expect(cookies[0]).to.have.property('path')
-
-      expect(cookies[1]).to.have.property('name', 'key')
-      expect(cookies[1]).to.have.property('value', 'value')
-      expect(cookies[1]).to.have.property('httpOnly', false)
-      expect(cookies[1]).to.have.property('secure', false)
-      expect(cookies[1]).to.have.property('domain', '.example.com')
-      expect(cookies[1]).to.have.property('path')
-    })
+    cy.getAllCookies()
+      .should("have.length", 2)
+      .should((cookies) => {
+        // each cookie has these properties
+        expect(cookies[0]).to.have.property("name", "key")
+        expect(cookies[0]).to.have.property("value", "value")
+        expect(cookies[0]).to.have.property("httpOnly", false)
+        expect(cookies[0]).to.have.property("secure", false)
+        expect(cookies[0]).to.have.property("domain")
+        expect(cookies[0]).to.have.property("path")
+
+        expect(cookies[1]).to.have.property("name", "key")
+        expect(cookies[1]).to.have.property("value", "value")
+        expect(cookies[1]).to.have.property("httpOnly", false)
+        expect(cookies[1]).to.have.property("secure", false)
+        expect(cookies[1]).to.have.property("domain", ".example.com")
+        expect(cookies[1]).to.have.property("path")
+      })
   })
 
-  it('cy.setCookie() - set a browser cookie', () => {
+  it("cy.setCookie() - set a browser cookie", () => {
     // https://on.cypress.io/setcookie
-    cy.getCookies().should('be.empty')
+    cy.getCookies().should("be.empty")
 
-    cy.setCookie('foo', 'bar')
+    cy.setCookie("foo", "bar")
 
     // cy.getCookie() yields a cookie object
-    cy.getCookie('foo').should('have.property', 'value', 'bar')
+    cy.getCookie("foo").should("have.property", "value", "bar")
   })
 
-  it('cy.clearCookie() - clear a browser cookie', () => {
+  it("cy.clearCookie() - clear a browser cookie", () => {
     // https://on.cypress.io/clearcookie
-    cy.getCookie('token').should('be.null')
+    cy.getCookie("token").should("be.null")
 
-    cy.get('#clearCookie .set-a-cookie').click()
+    cy.get("#clearCookie .set-a-cookie").click()
 
-    cy.getCookie('token').should('have.property', 'value', '123ABC')
+    cy.getCookie("token").should("have.property", "value", "123ABC")
 
     // cy.clearCookies() yields null
-    cy.clearCookie('token').should('be.null')
+    cy.clearCookie("token").should("be.null")
 
-    cy.getCookie('token').should('be.null')
+    cy.getCookie("token").should("be.null")
   })
 
-  it('cy.clearCookies() - clear browser cookies for the current domain', () => {
+  it("cy.clearCookies() - clear browser cookies for the current domain", () => {
     // https://on.cypress.io/clearcookies
-    cy.getCookies().should('be.empty')
+    cy.getCookies().should("be.empty")
 
-    cy.get('#clearCookies .set-a-cookie').click()
+    cy.get("#clearCookies .set-a-cookie").click()
 
-    cy.getCookies().should('have.length', 1)
+    cy.getCookies().should("have.length", 1)
 
     // cy.clearCookies() yields null
     cy.clearCookies()
 
-    cy.getCookies().should('be.empty')
+    cy.getCookies().should("be.empty")
   })
 
-  it('cy.clearAllCookies() - clear all browser cookies', () => {
+  it("cy.clearAllCookies() - clear all browser cookies", () => {
     // https://on.cypress.io/clearallcookies
-    cy.getAllCookies().should('be.empty')
+    cy.getAllCookies().should("be.empty")
 
-    cy.setCookie('key', 'value')
-    cy.setCookie('key', 'value', { domain: '.example.com' })
+    cy.setCookie("key", "value")
+    cy.setCookie("key", "value", { domain: ".example.com" })
 
-    cy.getAllCookies().should('have.length', 2)
+    cy.getAllCookies().should("have.length", 2)
 
     // cy.clearAllCookies() yields null
     cy.clearAllCookies()
 
-    cy.getAllCookies().should('be.empty')
+    cy.getAllCookies().should("be.empty")
   })
 })
diff --git a/cypress/e2e/2-advanced-examples/cypress_api.cy.js b/cypress/e2e/2-advanced-examples/cypress_api.cy.js
index 556f2b8..54e0afe 100644
--- a/cypress/e2e/2-advanced-examples/cypress_api.cy.js
+++ b/cypress/e2e/2-advanced-examples/cypress_api.cy.js
@@ -1,108 +1,113 @@
 /// <reference types="cypress" />
 
-context('Cypress APIs', () => {
-
-  context('Cypress.Commands', () => {
+context("Cypress APIs", () => {
+  context("Cypress.Commands", () => {
     beforeEach(() => {
-      cy.visit('https://example.cypress.io/cypress-api')
+      cy.visit("https://example.cypress.io/cypress-api")
     })
 
     // https://on.cypress.io/custom-commands
 
-    it('.add() - create a custom command', () => {
-      Cypress.Commands.add('console', {
-        prevSubject: true,
-      }, (subject, method) => {
-      // the previous subject is automatically received
-      // and the commands arguments are shifted
-
-        // allow us to change the console method used
-        method = method || 'log'
-
-        // log the subject to the console
-        console[method]('The subject is', subject)
-
-        // whatever we return becomes the new subject
-        // we don't want to change the subject so
-        // we return whatever was passed in
-        return subject
-      })
-
-      cy.get('button').console('info').then(($button) => {
-      // subject is still $button
-      })
+    it(".add() - create a custom command", () => {
+      Cypress.Commands.add(
+        "console",
+        {
+          prevSubject: true,
+        },
+        (subject, method) => {
+          // the previous subject is automatically received
+          // and the commands arguments are shifted
+
+          // allow us to change the console method used
+          method = method || "log"
+
+          // log the subject to the console
+          console[method]("The subject is", subject)
+
+          // whatever we return becomes the new subject
+          // we don't want to change the subject so
+          // we return whatever was passed in
+          return subject
+        },
+      )
+
+      cy.get("button")
+        .console("info")
+        .then(($button) => {
+          // subject is still $button
+        })
     })
   })
 
-  context('Cypress.Cookies', () => {
+  context("Cypress.Cookies", () => {
     beforeEach(() => {
-      cy.visit('https://example.cypress.io/cypress-api')
+      cy.visit("https://example.cypress.io/cypress-api")
     })
 
     // https://on.cypress.io/cookies
-    it('.debug() - enable or disable debugging', () => {
+    it(".debug() - enable or disable debugging", () => {
       Cypress.Cookies.debug(true)
 
       // Cypress will now log in the console when
       // cookies are set or cleared
-      cy.setCookie('fakeCookie', '123ABC')
-      cy.clearCookie('fakeCookie')
-      cy.setCookie('fakeCookie', '123ABC')
-      cy.clearCookie('fakeCookie')
-      cy.setCookie('fakeCookie', '123ABC')
+      cy.setCookie("fakeCookie", "123ABC")
+      cy.clearCookie("fakeCookie")
+      cy.setCookie("fakeCookie", "123ABC")
+      cy.clearCookie("fakeCookie")
+      cy.setCookie("fakeCookie", "123ABC")
     })
   })
 
-  context('Cypress.arch', () => {
+  context("Cypress.arch", () => {
     beforeEach(() => {
-      cy.visit('https://example.cypress.io/cypress-api')
+      cy.visit("https://example.cypress.io/cypress-api")
     })
 
-    it('Get CPU architecture name of underlying OS', () => {
-    // https://on.cypress.io/arch
+    it("Get CPU architecture name of underlying OS", () => {
+      // https://on.cypress.io/arch
       expect(Cypress.arch).to.exist
     })
   })
 
-  context('Cypress.config()', () => {
+  context("Cypress.config()", () => {
     beforeEach(() => {
-      cy.visit('https://example.cypress.io/cypress-api')
+      cy.visit("https://example.cypress.io/cypress-api")
     })
 
-    it('Get and set configuration options', () => {
-    // https://on.cypress.io/config
+    it("Get and set configuration options", () => {
+      // https://on.cypress.io/config
       let myConfig = Cypress.config()
 
-      expect(myConfig).to.have.property('animationDistanceThreshold', 5)
-      expect(myConfig).to.have.property('baseUrl', null)
-      expect(myConfig).to.have.property('defaultCommandTimeout', 4000)
-      expect(myConfig).to.have.property('requestTimeout', 5000)
-      expect(myConfig).to.have.property('responseTimeout', 30000)
-      expect(myConfig).to.have.property('viewportHeight', 660)
-      expect(myConfig).to.have.property('viewportWidth', 1000)
-      expect(myConfig).to.have.property('pageLoadTimeout', 60000)
-      expect(myConfig).to.have.property('waitForAnimations', true)
+      expect(myConfig).to.have.property("animationDistanceThreshold", 5)
+      expect(myConfig).to.have.property("baseUrl", null)
+      expect(myConfig).to.have.property("defaultCommandTimeout", 4000)
+      expect(myConfig).to.have.property("requestTimeout", 5000)
+      expect(myConfig).to.have.property("responseTimeout", 30000)
+      expect(myConfig).to.have.property("viewportHeight", 660)
+      expect(myConfig).to.have.property("viewportWidth", 1000)
+      expect(myConfig).to.have.property("pageLoadTimeout", 60000)
+      expect(myConfig).to.have.property("waitForAnimations", true)
 
-      expect(Cypress.config('pageLoadTimeout')).to.eq(60000)
+      expect(Cypress.config("pageLoadTimeout")).to.eq(60000)
 
       // this will change the config for the rest of your tests!
-      Cypress.config('pageLoadTimeout', 20000)
+      Cypress.config("pageLoadTimeout", 20000)
 
-      expect(Cypress.config('pageLoadTimeout')).to.eq(20000)
+      expect(Cypress.config("pageLoadTimeout")).to.eq(20000)
 
-      Cypress.config('pageLoadTimeout', 60000)
+      Cypress.config("pageLoadTimeout", 60000)
     })
   })
 
-  context('Cypress.dom', () => {
+  context("Cypress.dom", () => {
     beforeEach(() => {
-      cy.visit('https://example.cypress.io/cypress-api')
+      cy.visit("https://example.cypress.io/cypress-api")
     })
 
     // https://on.cypress.io/dom
-    it('.isHidden() - determine if a DOM element is hidden', () => {
-      let hiddenP = Cypress.$('.dom-p p.hidden').get(0)
-      let visibleP = Cypress.$('.dom-p p.visible').get(0)
+    it(".isHidden() - determine if a DOM element is hidden", () => {
+      let hiddenP = Cypress.$(".dom-p p.hidden").get(0)
+      let visibleP = Cypress.$(".dom-p p.visible").get(0)
 
       // our first paragraph has css class 'hidden'
       expect(Cypress.dom.isHidden(hiddenP)).to.be.true
@@ -110,76 +115,83 @@ context('Cypress APIs', () => {
     })
   })
 
-  context('Cypress.env()', () => {
+  context("Cypress.env()", () => {
     beforeEach(() => {
-      cy.visit('https://example.cypress.io/cypress-api')
+      cy.visit("https://example.cypress.io/cypress-api")
     })
 
     // We can set environment variables for highly dynamic values
 
     // https://on.cypress.io/environment-variables
-    it('Get environment variables', () => {
-    // https://on.cypress.io/env
-    // set multiple environment variables
+    it("Get environment variables", () => {
+      // https://on.cypress.io/env
+      // set multiple environment variables
       Cypress.env({
-        host: 'veronica.dev.local',
-        api_server: 'http://localhost:8888/v1/',
+        host: "veronica.dev.local",
+        api_server: "http://localhost:8888/v1/",
       })
 
       // get environment variable
-      expect(Cypress.env('host')).to.eq('veronica.dev.local')
+      expect(Cypress.env("host")).to.eq("veronica.dev.local")
 
       // set environment variable
-      Cypress.env('api_server', 'http://localhost:8888/v2/')
-      expect(Cypress.env('api_server')).to.eq('http://localhost:8888/v2/')
+      Cypress.env("api_server", "http://localhost:8888/v2/")
+      expect(Cypress.env("api_server")).to.eq("http://localhost:8888/v2/")
 
       // get all environment variable
-      expect(Cypress.env()).to.have.property('host', 'veronica.dev.local')
-      expect(Cypress.env()).to.have.property('api_server', 'http://localhost:8888/v2/')
+      expect(Cypress.env()).to.have.property("host", "veronica.dev.local")
+      expect(Cypress.env()).to.have.property(
+        "api_server",
+        "http://localhost:8888/v2/",
+      )
     })
   })
 
-  context('Cypress.log', () => {
+  context("Cypress.log", () => {
     beforeEach(() => {
-      cy.visit('https://example.cypress.io/cypress-api')
+      cy.visit("https://example.cypress.io/cypress-api")
     })
 
-    it('Control what is printed to the Command Log', () => {
-    // https://on.cypress.io/cypress-log
+    it("Control what is printed to the Command Log", () => {
+      // https://on.cypress.io/cypress-log
     })
   })
 
-  context('Cypress.platform', () => {
+  context("Cypress.platform", () => {
     beforeEach(() => {
-      cy.visit('https://example.cypress.io/cypress-api')
+      cy.visit("https://example.cypress.io/cypress-api")
     })
 
-    it('Get underlying OS name', () => {
-    // https://on.cypress.io/platform
+    it("Get underlying OS name", () => {
+      // https://on.cypress.io/platform
       expect(Cypress.platform).to.be.exist
     })
   })
 
-  context('Cypress.version', () => {
+  context("Cypress.version", () => {
     beforeEach(() => {
-      cy.visit('https://example.cypress.io/cypress-api')
+      cy.visit("https://example.cypress.io/cypress-api")
     })
 
-    it('Get current version of Cypress being run', () => {
-    // https://on.cypress.io/version
+    it("Get current version of Cypress being run", () => {
+      // https://on.cypress.io/version
       expect(Cypress.version).to.be.exist
     })
   })
 
-  context('Cypress.spec', () => {
+  context("Cypress.spec", () => {
     beforeEach(() => {
-      cy.visit('https://example.cypress.io/cypress-api')
+      cy.visit("https://example.cypress.io/cypress-api")
     })
 
-    it('Get current spec information', () => {
-    // https://on.cypress.io/spec
-    // wrap the object so we can inspect it easily by clicking in the command log
-      cy.wrap(Cypress.spec).should('include.keys', ['name', 'relative', 'absolute'])
+    it("Get current spec information", () => {
+      // https://on.cypress.io/spec
+      // wrap the object so we can inspect it easily by clicking in the command log
+      cy.wrap(Cypress.spec).should("include.keys", [
+        "name",
+        "relative",
+        "absolute",
+      ])
     })
   })
 })
diff --git a/cypress/e2e/2-advanced-examples/files.cy.js b/cypress/e2e/2-advanced-examples/files.cy.js
index 1be9d44..494bb43 100644
--- a/cypress/e2e/2-advanced-examples/files.cy.js
+++ b/cypress/e2e/2-advanced-examples/files.cy.js
@@ -2,18 +2,18 @@
 
 /// JSON fixture file can be loaded directly using
 // the built-in JavaScript bundler
-const requiredExample = require('../../fixtures/example')
+const requiredExample = require("../../fixtures/example")
 
-context('Files', () => {
+context("Files", () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/files')
+    cy.visit("https://example.cypress.io/commands/files")
 
     // load example.json fixture file and store
     // in the test context object
-    cy.fixture('example.json').as('example')
+    cy.fixture("example.json").as("example")
   })
 
-  it('cy.fixture() - load a fixture', () => {
+  it("cy.fixture() - load a fixture", () => {
     // https://on.cypress.io/fixture
 
     // Instead of writing a response inline you can
@@ -21,65 +21,67 @@ context('Files', () => {
 
     // when application makes an Ajax request matching "GET **/comments/*"
     // Cypress will intercept it and reply with the object in `example.json` fixture
-    cy.intercept('GET', '**/comments/*', { fixture: 'example.json' }).as('getComment')
+    cy.intercept("GET", "**/comments/*", { fixture: "example.json" }).as(
+      "getComment",
+    )
 
     // we have code that gets a comment when
     // the button is clicked in scripts.js
-    cy.get('.fixture-btn').click()
+    cy.get(".fixture-btn").click()
 
-    cy.wait('@getComment').its('response.body')
-      .should('have.property', 'name')
-      .and('include', 'Using fixtures to represent data')
+    cy.wait("@getComment")
+      .its("response.body")
+      .should("have.property", "name")
+      .and("include", "Using fixtures to represent data")
   })
 
-  it('cy.fixture() or require - load a fixture', function () {
+  it("cy.fixture() or require - load a fixture", function () {
     // we are inside the "function () { ... }"
     // callback and can use test context object "this"
     // "this.example" was loaded in "beforeEach" function callback
-    expect(this.example, 'fixture in the test context')
-      .to.deep.equal(requiredExample)
+    expect(this.example, "fixture in the test context").to.deep.equal(
+      requiredExample,
+    )
 
     // or use "cy.wrap" and "should('deep.equal', ...)" assertion
-    cy.wrap(this.example)
-      .should('deep.equal', requiredExample)
+    cy.wrap(this.example).should("deep.equal", requiredExample)
   })
 
-  it('cy.readFile() - read file contents', () => {
+  it("cy.readFile() - read file contents", () => {
     // https://on.cypress.io/readfile
 
     // You can read a file and yield its contents
     // The filePath is relative to your project's root.
-    cy.readFile(Cypress.config('configFile')).then((config) => {
-      expect(config).to.be.an('string')
+    cy.readFile(Cypress.config("configFile")).then((config) => {
+      expect(config).to.be.an("string")
     })
   })
 
-  it('cy.writeFile() - write to a file', () => {
+  it("cy.writeFile() - write to a file", () => {
     // https://on.cypress.io/writefile
 
     // You can write to a file
 
     // Use a response from a request to automatically
     // generate a fixture file for use later
-    cy.request('https://jsonplaceholder.cypress.io/users')
-      .then((response) => {
-        cy.writeFile('cypress/fixtures/users.json', response.body)
-      })
+    cy.request("https://jsonplaceholder.cypress.io/users").then((response) => {
+      cy.writeFile("cypress/fixtures/users.json", response.body)
+    })
 
-    cy.fixture('users').should((users) => {
+    cy.fixture("users").should((users) => {
       expect(users[0].name).to.exist
     })
 
     // JavaScript arrays and objects are stringified
     // and formatted into text.
-    cy.writeFile('cypress/fixtures/profile.json', {
+    cy.writeFile("cypress/fixtures/profile.json", {
       id: 8739,
-      name: 'Jane',
-      email: 'jane@example.com',
+      name: "Jane",
+      email: "jane@example.com",
     })
 
-    cy.fixture('profile').should((profile) => {
-      expect(profile.name).to.eq('Jane')
+    cy.fixture("profile").should((profile) => {
+      expect(profile.name).to.eq("Jane")
     })
   })
 })
diff --git a/cypress/e2e/2-advanced-examples/location.cy.js b/cypress/e2e/2-advanced-examples/location.cy.js
index 299867d..d1b3135 100644
--- a/cypress/e2e/2-advanced-examples/location.cy.js
+++ b/cypress/e2e/2-advanced-examples/location.cy.js
@@ -1,32 +1,34 @@
 /// <reference types="cypress" />
 
-context('Location', () => {
+context("Location", () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/location')
+    cy.visit("https://example.cypress.io/commands/location")
   })
 
-  it('cy.hash() - get the current URL hash', () => {
+  it("cy.hash() - get the current URL hash", () => {
     // https://on.cypress.io/hash
-    cy.hash().should('be.empty')
+    cy.hash().should("be.empty")
   })
 
-  it('cy.location() - get window.location', () => {
+  it("cy.location() - get window.location", () => {
     // https://on.cypress.io/location
     cy.location().should((location) => {
       expect(location.hash).to.be.empty
-      expect(location.href).to.eq('https://example.cypress.io/commands/location')
-      expect(location.host).to.eq('example.cypress.io')
-      expect(location.hostname).to.eq('example.cypress.io')
-      expect(location.origin).to.eq('https://example.cypress.io')
-      expect(location.pathname).to.eq('/commands/location')
-      expect(location.port).to.eq('')
-      expect(location.protocol).to.eq('https:')
+      expect(location.href).to.eq(
+        "https://example.cypress.io/commands/location",
+      )
+      expect(location.host).to.eq("example.cypress.io")
+      expect(location.hostname).to.eq("example.cypress.io")
+      expect(location.origin).to.eq("https://example.cypress.io")
+      expect(location.pathname).to.eq("/commands/location")
+      expect(location.port).to.eq("")
+      expect(location.protocol).to.eq("https:")
       expect(location.search).to.be.empty
     })
   })
 
-  it('cy.url() - get the current URL', () => {
+  it("cy.url() - get the current URL", () => {
     // https://on.cypress.io/url
-    cy.url().should('eq', 'https://example.cypress.io/commands/location')
+    cy.url().should("eq", "https://example.cypress.io/commands/location")
   })
 })
diff --git a/cypress/e2e/2-advanced-examples/misc.cy.js b/cypress/e2e/2-advanced-examples/misc.cy.js
index 087d33c..22a6605 100644
--- a/cypress/e2e/2-advanced-examples/misc.cy.js
+++ b/cypress/e2e/2-advanced-examples/misc.cy.js
@@ -1,25 +1,25 @@
 /// <reference types="cypress" />
 
-context('Misc', () => {
+context("Misc", () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/misc')
+    cy.visit("https://example.cypress.io/commands/misc")
   })
 
-  it('.end() - end the command chain', () => {
+  it(".end() - end the command chain", () => {
     // https://on.cypress.io/end
 
     // cy.end is useful when you want to end a chain of commands
     // and force Cypress to re-query from the root element
-    cy.get('.misc-table').within(() => {
+    cy.get(".misc-table").within(() => {
       // ends the current chain and yields null
-      cy.contains('Cheryl').click().end()
+      cy.contains("Cheryl").click().end()
 
       // queries the entire table again
-      cy.contains('Charles').click()
+      cy.contains("Charles").click()
     })
   })
 
-  it('cy.exec() - execute a system command', () => {
+  it("cy.exec() - execute a system command", () => {
     // execute a system command.
     // so you can take actions necessary for
     // your test outside the scope of Cypress.
@@ -33,72 +33,71 @@ context('Misc', () => {
     // on CircleCI Windows build machines we have a failure to run bash shell
     // https://github.com/cypress-io/cypress/issues/5169
     // so skip some of the tests by passing flag "--env circle=true"
-    const isCircleOnWindows = Cypress.platform === 'win32' && Cypress.env('circle')
+    const isCircleOnWindows =
+      Cypress.platform === "win32" && Cypress.env("circle")
 
     if (isCircleOnWindows) {
-      cy.log('Skipping test on CircleCI')
+      cy.log("Skipping test on CircleCI")
 
       return
     }
 
     // cy.exec problem on Shippable CI
     // https://github.com/cypress-io/cypress/issues/6718
-    const isShippable = Cypress.platform === 'linux' && Cypress.env('shippable')
+    const isShippable = Cypress.platform === "linux" && Cypress.env("shippable")
 
     if (isShippable) {
-      cy.log('Skipping test on ShippableCI')
+      cy.log("Skipping test on ShippableCI")
 
       return
     }
 
-    cy.exec('echo Jane Lane')
-      .its('stdout').should('contain', 'Jane Lane')
+    cy.exec("echo Jane Lane").its("stdout").should("contain", "Jane Lane")
 
-    if (Cypress.platform === 'win32') {
-      cy.exec(`print ${Cypress.config('configFile')}`)
-        .its('stderr').should('be.empty')
+    if (Cypress.platform === "win32") {
+      cy.exec(`print ${Cypress.config("configFile")}`)
+        .its("stderr")
+        .should("be.empty")
     } else {
-      cy.exec(`cat ${Cypress.config('configFile')}`)
-        .its('stderr').should('be.empty')
+      cy.exec(`cat ${Cypress.config("configFile")}`)
+        .its("stderr")
+        .should("be.empty")
 
-      cy.exec('pwd')
-        .its('code').should('eq', 0)
+      cy.exec("pwd").its("code").should("eq", 0)
     }
   })
 
-  it('cy.focused() - get the DOM element that has focus', () => {
+  it("cy.focused() - get the DOM element that has focus", () => {
     // https://on.cypress.io/focused
-    cy.get('.misc-form').find('#name').click()
-    cy.focused().should('have.id', 'name')
+    cy.get(".misc-form").find("#name").click()
+    cy.focused().should("have.id", "name")
 
-    cy.get('.misc-form').find('#description').click()
-    cy.focused().should('have.id', 'description')
+    cy.get(".misc-form").find("#description").click()
+    cy.focused().should("have.id", "description")
   })
 
-  context('Cypress.Screenshot', function () {
-    it('cy.screenshot() - take a screenshot', () => {
+  context("Cypress.Screenshot", function () {
+    it("cy.screenshot() - take a screenshot", () => {
       // https://on.cypress.io/screenshot
-      cy.screenshot('my-image')
+      cy.screenshot("my-image")
     })
 
-    it('Cypress.Screenshot.defaults() - change default config of screenshots', function () {
+    it("Cypress.Screenshot.defaults() - change default config of screenshots", function () {
       Cypress.Screenshot.defaults({
-        blackout: ['.foo'],
-        capture: 'viewport',
+        blackout: [".foo"],
+        capture: "viewport",
         clip: { x: 0, y: 0, width: 200, height: 200 },
         scale: false,
         disableTimersAndAnimations: true,
         screenshotOnRunFailure: true,
-        onBeforeScreenshot () { },
-        onAfterScreenshot () { },
+        onBeforeScreenshot() {},
+        onAfterScreenshot() {},
       })
     })
   })
 
-  it('cy.wrap() - wrap an object', () => {
+  it("cy.wrap() - wrap an object", () => {
     // https://on.cypress.io/wrap
-    cy.wrap({ foo: 'bar' })
-      .should('have.property', 'foo')
-      .and('include', 'bar')
+    cy.wrap({ foo: "bar" }).should("have.property", "foo").and("include", "bar")
   })
 })
diff --git a/cypress/e2e/2-advanced-examples/navigation.cy.js b/cypress/e2e/2-advanced-examples/navigation.cy.js
index b85a468..fe23048 100644
--- a/cypress/e2e/2-advanced-examples/navigation.cy.js
+++ b/cypress/e2e/2-advanced-examples/navigation.cy.js
@@ -1,33 +1,33 @@
 /// <reference types="cypress" />
 
-context('Navigation', () => {
+context("Navigation", () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io')
-    cy.get('.navbar-nav').contains('Commands').click()
-    cy.get('.dropdown-menu').contains('Navigation').click()
+    cy.visit("https://example.cypress.io")
+    cy.get(".navbar-nav").contains("Commands").click()
+    cy.get(".dropdown-menu").contains("Navigation").click()
   })
 
-  it('cy.go() - go back or forward in the browser\'s history', () => {
+  it("cy.go() - go back or forward in the browser's history", () => {
     // https://on.cypress.io/go
 
-    cy.location('pathname').should('include', 'navigation')
+    cy.location("pathname").should("include", "navigation")
 
-    cy.go('back')
-    cy.location('pathname').should('not.include', 'navigation')
+    cy.go("back")
+    cy.location("pathname").should("not.include", "navigation")
 
-    cy.go('forward')
-    cy.location('pathname').should('include', 'navigation')
+    cy.go("forward")
+    cy.location("pathname").should("include", "navigation")
 
     // clicking back
     cy.go(-1)
-    cy.location('pathname').should('not.include', 'navigation')
+    cy.location("pathname").should("not.include", "navigation")
 
     // clicking forward
     cy.go(1)
-    cy.location('pathname').should('include', 'navigation')
+    cy.location("pathname").should("include", "navigation")
   })
 
-  it('cy.reload() - reload the page', () => {
+  it("cy.reload() - reload the page", () => {
     // https://on.cypress.io/reload
     cy.reload()
 
@@ -35,22 +35,22 @@ context('Navigation', () => {
     cy.reload(true)
   })
 
-  it('cy.visit() - visit a remote url', () => {
+  it("cy.visit() - visit a remote url", () => {
     // https://on.cypress.io/visit
 
     // Visit any sub-domain of your current domain
 
     // Pass options to the visit
-    cy.visit('https://example.cypress.io/commands/navigation', {
+    cy.visit("https://example.cypress.io/commands/navigation", {
       timeout: 50000, // increase total time for the visit to resolve
-      onBeforeLoad (contentWindow) {
+      onBeforeLoad(contentWindow) {
         // contentWindow is the remote page's window object
-        expect(typeof contentWindow === 'object').to.be.true
+        expect(typeof contentWindow === "object").to.be.true
       },
-      onLoad (contentWindow) {
+      onLoad(contentWindow) {
         // contentWindow is the remote page's window object
-        expect(typeof contentWindow === 'object').to.be.true
+        expect(typeof contentWindow === "object").to.be.true
       },
     })
-    })
+  })
 })
diff --git a/cypress/e2e/2-advanced-examples/network_requests.cy.js b/cypress/e2e/2-advanced-examples/network_requests.cy.js
index 11213a0..f5ec634 100644
--- a/cypress/e2e/2-advanced-examples/network_requests.cy.js
+++ b/cypress/e2e/2-advanced-examples/network_requests.cy.js
@@ -1,96 +1,103 @@
 /// <reference types="cypress" />
 
-context('Network Requests', () => {
+context("Network Requests", () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/network-requests')
+    cy.visit("https://example.cypress.io/commands/network-requests")
   })
 
   // Manage HTTP requests in your app
 
-  it('cy.request() - make an XHR request', () => {
+  it("cy.request() - make an XHR request", () => {
     // https://on.cypress.io/request
-    cy.request('https://jsonplaceholder.cypress.io/comments')
-      .should((response) => {
+    cy.request("https://jsonplaceholder.cypress.io/comments").should(
+      (response) => {
         expect(response.status).to.eq(200)
         // the server sometimes gets an extra comment posted from another machine
         // which gets returned as 1 extra object
-        expect(response.body).to.have.property('length').and.be.oneOf([500, 501])
-        expect(response).to.have.property('headers')
-        expect(response).to.have.property('duration')
-      })
+        expect(response.body)
+          .to.have.property("length")
+          .and.be.oneOf([500, 501])
+        expect(response).to.have.property("headers")
+        expect(response).to.have.property("duration")
+      },
+    )
   })
 
-  it('cy.request() - verify response using BDD syntax', () => {
-    cy.request('https://jsonplaceholder.cypress.io/comments')
-    .then((response) => {
-      // https://on.cypress.io/assertions
-      expect(response).property('status').to.equal(200)
-      expect(response).property('body').to.have.property('length').and.be.oneOf([500, 501])
-      expect(response).to.include.keys('headers', 'duration')
-    })
+  it("cy.request() - verify response using BDD syntax", () => {
+    cy.request("https://jsonplaceholder.cypress.io/comments").then(
+      (response) => {
+        // https://on.cypress.io/assertions
+        expect(response).property("status").to.equal(200)
+        expect(response)
+          .property("body")
+          .to.have.property("length")
+          .and.be.oneOf([500, 501])
+        expect(response).to.include.keys("headers", "duration")
+      },
+    )
   })
 
-  it('cy.request() with query parameters', () => {
+  it("cy.request() with query parameters", () => {
     // will execute request
     // https://jsonplaceholder.cypress.io/comments?postId=1&id=3
     cy.request({
-      url: 'https://jsonplaceholder.cypress.io/comments',
+      url: "https://jsonplaceholder.cypress.io/comments",
       qs: {
         postId: 1,
         id: 3,
       },
     })
-    .its('body')
-    .should('be.an', 'array')
-    .and('have.length', 1)
-    .its('0') // yields first element of the array
-    .should('contain', {
-      postId: 1,
-      id: 3,
-    })
+      .its("body")
+      .should("be.an", "array")
+      .and("have.length", 1)
+      .its("0") // yields first element of the array
+      .should("contain", {
+        postId: 1,
+        id: 3,
+      })
   })
 
-  it('cy.request() - pass result to the second request', () => {
+  it("cy.request() - pass result to the second request", () => {
     // first, let's find out the userId of the first user we have
-    cy.request('https://jsonplaceholder.cypress.io/users?_limit=1')
-      .its('body') // yields the response object
-      .its('0') // yields the first element of the returned list
+    cy.request("https://jsonplaceholder.cypress.io/users?_limit=1")
+      .its("body") // yields the response object
+      .its("0") // yields the first element of the returned list
       // the above two commands its('body').its('0')
       // can be written as its('body.0')
       // if you do not care about TypeScript checks
       .then((user) => {
-        expect(user).property('id').to.be.a('number')
+        expect(user).property("id").to.be.a("number")
         // make a new post on behalf of the user
-        cy.request('POST', 'https://jsonplaceholder.cypress.io/posts', {
+        cy.request("POST", "https://jsonplaceholder.cypress.io/posts", {
           userId: user.id,
-          title: 'Cypress Test Runner',
-          body: 'Fast, easy and reliable testing for anything that runs in a browser.',
+          title: "Cypress Test Runner",
+          body: "Fast, easy and reliable testing for anything that runs in a browser.",
         })
       })
       // note that the value here is the returned value of the 2nd request
       // which is the new post object
       .then((response) => {
-        expect(response).property('status').to.equal(201) // new entity created
-        expect(response).property('body').to.contain({
-          title: 'Cypress Test Runner',
+        expect(response).property("status").to.equal(201) // new entity created
+        expect(response).property("body").to.contain({
+          title: "Cypress Test Runner",
         })
 
         // we don't know the exact post id - only that it will be > 100
         // since JSONPlaceholder has built-in 100 posts
-        expect(response.body).property('id').to.be.a('number')
-          .and.to.be.gt(100)
+        expect(response.body).property("id").to.be.a("number").and.to.be.gt(100)
 
         // we don't know the user id here - since it was in above closure
         // so in this test just confirm that the property is there
-        expect(response.body).property('userId').to.be.a('number')
+        expect(response.body).property("userId").to.be.a("number")
       })
   })
 
-  it('cy.request() - save response in the shared test context', () => {
+  it("cy.request() - save response in the shared test context", () => {
     // https://on.cypress.io/variables-and-aliases
-    cy.request('https://jsonplaceholder.cypress.io/users?_limit=1')
-      .its('body').its('0') // yields the first element of the returned list
-      .as('user') // saves the object in the test context
+    cy.request("https://jsonplaceholder.cypress.io/users?_limit=1")
+      .its("body")
+      .its("0") // yields the first element of the returned list
+      .as("user") // saves the object in the test context
       .then(function () {
         // NOTE 👀
         //  By the time this callback runs the "as('user')" command
@@ -98,66 +105,77 @@ context('Network Requests', () => {
         //  To access the test context we need to use
         //  the "function () { ... }" callback form,
         //  otherwise "this" points at a wrong or undefined object!
-        cy.request('POST', 'https://jsonplaceholder.cypress.io/posts', {
+        cy.request("POST", "https://jsonplaceholder.cypress.io/posts", {
           userId: this.user.id,
-          title: 'Cypress Test Runner',
-          body: 'Fast, easy and reliable testing for anything that runs in a browser.',
+          title: "Cypress Test Runner",
+          body: "Fast, easy and reliable testing for anything that runs in a browser.",
         })
-        .its('body').as('post') // save the new post from the response
+          .its("body")
+          .as("post") // save the new post from the response
       })
       .then(function () {
         // When this callback runs, both "cy.request" API commands have finished
         // and the test context has "user" and "post" objects set.
         // Let's verify them.
-        expect(this.post, 'post has the right user id').property('userId').to.equal(this.user.id)
+        expect(this.post, "post has the right user id")
+          .property("userId")
+          .to.equal(this.user.id)
       })
   })
 
-  it('cy.intercept() - route responses to matching requests', () => {
+  it("cy.intercept() - route responses to matching requests", () => {
     // https://on.cypress.io/intercept
 
-    let message = 'whoa, this comment does not exist'
+    let message = "whoa, this comment does not exist"
 
     // Listen to GET to comments/1
-    cy.intercept('GET', '**/comments/*').as('getComment')
+    cy.intercept("GET", "**/comments/*").as("getComment")
 
     // we have code that gets a comment when
     // the button is clicked in scripts.js
-    cy.get('.network-btn').click()
+    cy.get(".network-btn").click()
 
     // https://on.cypress.io/wait
-    cy.wait('@getComment').its('response.statusCode').should('be.oneOf', [200, 304])
+    cy.wait("@getComment")
+      .its("response.statusCode")
+      .should("be.oneOf", [200, 304])
 
     // Listen to POST to comments
-    cy.intercept('POST', '**/comments').as('postComment')
+    cy.intercept("POST", "**/comments").as("postComment")
 
     // we have code that posts a comment when
     // the button is clicked in scripts.js
-    cy.get('.network-post').click()
-    cy.wait('@postComment').should(({ request, response }) => {
-      expect(request.body).to.include('email')
-      expect(request.headers).to.have.property('content-type')
-      expect(response && response.body).to.have.property('name', 'Using POST in cy.intercept()')
+    cy.get(".network-post").click()
+    cy.wait("@postComment").should(({ request, response }) => {
+      expect(request.body).to.include("email")
+      expect(request.headers).to.have.property("content-type")
+      expect(response && response.body).to.have.property(
+        "name",
+        "Using POST in cy.intercept()",
+      )
     })
 
     // Stub a response to PUT comments/ ****
-    cy.intercept({
-      method: 'PUT',
-      url: '**/comments/*',
-    }, {
-      statusCode: 404,
-      body: { error: message },
-      headers: { 'access-control-allow-origin': '*' },
-      delayMs: 500,
-    }).as('putComment')
+    cy.intercept(
+      {
+        method: "PUT",
+        url: "**/comments/*",
+      },
+      {
+        statusCode: 404,
+        body: { error: message },
+        headers: { "access-control-allow-origin": "*" },
+        delayMs: 500,
+      },
+    ).as("putComment")
 
     // we have code that puts a comment when
     // the button is clicked in scripts.js
-    cy.get('.network-put').click()
+    cy.get(".network-put").click()
 
-    cy.wait('@putComment')
+    cy.wait("@putComment")
 
     // our 404 statusCode logic in scripts.js executed
-    cy.get('.network-put-comment').should('contain', message)
+    cy.get(".network-put-comment").should("contain", message)
   })
 })
diff --git a/cypress/e2e/2-advanced-examples/querying.cy.js b/cypress/e2e/2-advanced-examples/querying.cy.js
index 0097048..5d2f35c 100644
--- a/cypress/e2e/2-advanced-examples/querying.cy.js
+++ b/cypress/e2e/2-advanced-examples/querying.cy.js
@@ -1,114 +1,106 @@
 /// <reference types="cypress" />
 
-context('Querying', () => {
+context("Querying", () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/querying')
+    cy.visit("https://example.cypress.io/commands/querying")
   })
 
   // The most commonly used query is 'cy.get()', you can
   // think of this like the '$' in jQuery
 
-  it('cy.get() - query DOM elements', () => {
+  it("cy.get() - query DOM elements", () => {
     // https://on.cypress.io/get
 
-    cy.get('#query-btn').should('contain', 'Button')
+    cy.get("#query-btn").should("contain", "Button")
 
-    cy.get('.query-btn').should('contain', 'Button')
+    cy.get(".query-btn").should("contain", "Button")
 
-    cy.get('#querying .well>button:first').should('contain', 'Button')
+    cy.get("#querying .well>button:first").should("contain", "Button")
     //              ↲
     // Use CSS selectors just like jQuery
 
-    cy.get('[data-test-id="test-example"]').should('have.class', 'example')
+    cy.get('[data-test-id="test-example"]').should("have.class", "example")
 
     // 'cy.get()' yields jQuery object, you can get its attribute
     // by invoking `.attr()` method
     cy.get('[data-test-id="test-example"]')
-      .invoke('attr', 'data-test-id')
-      .should('equal', 'test-example')
+      .invoke("attr", "data-test-id")
+      .should("equal", "test-example")
 
     // or you can get element's CSS property
     cy.get('[data-test-id="test-example"]')
-      .invoke('css', 'position')
-      .should('equal', 'static')
+      .invoke("css", "position")
+      .should("equal", "static")
 
     // or use assertions directly during 'cy.get()'
     // https://on.cypress.io/assertions
     cy.get('[data-test-id="test-example"]')
-      .should('have.attr', 'data-test-id', 'test-example')
-      .and('have.css', 'position', 'static')
+      .should("have.attr", "data-test-id", "test-example")
+      .and("have.css", "position", "static")
   })
 
-  it('cy.contains() - query DOM elements with matching content', () => {
+  it("cy.contains() - query DOM elements with matching content", () => {
     // https://on.cypress.io/contains
-    cy.get('.query-list')
-      .contains('bananas')
-      .should('have.class', 'third')
+    cy.get(".query-list").contains("bananas").should("have.class", "third")
 
     // we can pass a regexp to `.contains()`
-    cy.get('.query-list')
-      .contains(/^b\w+/)
-      .should('have.class', 'third')
+    cy.get(".query-list").contains(/^b\w+/).should("have.class", "third")
 
-    cy.get('.query-list')
-      .contains('apples')
-      .should('have.class', 'first')
+    cy.get(".query-list").contains("apples").should("have.class", "first")
 
     // passing a selector to contains will
     // yield the selector containing the text
-    cy.get('#querying')
-      .contains('ul', 'oranges')
-      .should('have.class', 'query-list')
+    cy.get("#querying")
+      .contains("ul", "oranges")
+      .should("have.class", "query-list")
 
-    cy.get('.query-button')
-      .contains('Save Form')
-      .should('have.class', 'btn')
+    cy.get(".query-button").contains("Save Form").should("have.class", "btn")
   })
 
-  it('.within() - query DOM elements within a specific element', () => {
+  it(".within() - query DOM elements within a specific element", () => {
     // https://on.cypress.io/within
-    cy.get('.query-form').within(() => {
-      cy.get('input:first').should('have.attr', 'placeholder', 'Email')
-      cy.get('input:last').should('have.attr', 'placeholder', 'Password')
+    cy.get(".query-form").within(() => {
+      cy.get("input:first").should("have.attr", "placeholder", "Email")
+      cy.get("input:last").should("have.attr", "placeholder", "Password")
     })
   })
 
-  it('cy.root() - query the root DOM element', () => {
+  it("cy.root() - query the root DOM element", () => {
     // https://on.cypress.io/root
 
     // By default, root is the document
-    cy.root().should('match', 'html')
+    cy.root().should("match", "html")
 
-    cy.get('.query-ul').within(() => {
+    cy.get(".query-ul").within(() => {
       // In this within, the root is now the ul DOM element
-      cy.root().should('have.class', 'query-ul')
+      cy.root().should("have.class", "query-ul")
     })
   })
 
-  it('best practices - selecting elements', () => {
+  it("best practices - selecting elements", () => {
     // https://on.cypress.io/best-practices#Selecting-Elements
-    cy.get('[data-cy=best-practices-selecting-elements]').within(() => {
+    cy.get("[data-cy=best-practices-selecting-elements]").within(() => {
       // Worst - too generic, no context
-      cy.get('button').click()
+      cy.get("button").click()
 
       // Bad. Coupled to styling. Highly subject to change.
-      cy.get('.btn.btn-large').click()
+      cy.get(".btn.btn-large").click()
 
       // Average. Coupled to the `name` attribute which has HTML semantics.
-      cy.get('[name=submission]').click()
+      cy.get("[name=submission]").click()
 
       // Better. But still coupled to styling or JS event listeners.
-      cy.get('#main').click()
+      cy.get("#main").click()
 
       // Slightly better. Uses an ID but also ensures the element
       // has an ARIA role attribute
-      cy.get('#main[role=button]').click()
+      cy.get("#main[role=button]").click()
 
       // Much better. But still coupled to text content that may change.
-      cy.contains('Submit').click()
+      cy.contains("Submit").click()
 
       // Best. Insulated from all changes.
-      cy.get('[data-cy=submit]').click()
+      cy.get("[data-cy=submit]").click()
     })
   })
 })
diff --git a/cypress/e2e/2-advanced-examples/spies_stubs_clocks.cy.js b/cypress/e2e/2-advanced-examples/spies_stubs_clocks.cy.js
index 88db215..2d0a036 100644
--- a/cypress/e2e/2-advanced-examples/spies_stubs_clocks.cy.js
+++ b/cypress/e2e/2-advanced-examples/spies_stubs_clocks.cy.js
@@ -1,70 +1,70 @@
 /// <reference types="cypress" />
 
-context('Spies, Stubs, and Clock', () => {
-  it('cy.spy() - wrap a method in a spy', () => {
+context("Spies, Stubs, and Clock", () => {
+  it("cy.spy() - wrap a method in a spy", () => {
     // https://on.cypress.io/spy
-    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+    cy.visit("https://example.cypress.io/commands/spies-stubs-clocks")
 
     const obj = {
-      foo () {},
+      foo() {},
     }
 
-    const spy = cy.spy(obj, 'foo').as('anyArgs')
+    const spy = cy.spy(obj, "foo").as("anyArgs")
 
     obj.foo()
 
     expect(spy).to.be.called
   })
 
-  it('cy.spy() retries until assertions pass', () => {
-    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+  it("cy.spy() retries until assertions pass", () => {
+    cy.visit("https://example.cypress.io/commands/spies-stubs-clocks")
 
     const obj = {
       /**
        * Prints the argument passed
        * @param x {any}
-      */
-      foo (x) {
-        console.log('obj.foo called with', x)
+       */
+      foo(x) {
+        console.log("obj.foo called with", x)
       },
     }
 
-    cy.spy(obj, 'foo').as('foo')
+    cy.spy(obj, "foo").as("foo")
 
     setTimeout(() => {
-      obj.foo('first')
+      obj.foo("first")
     }, 500)
 
     setTimeout(() => {
-      obj.foo('second')
+      obj.foo("second")
     }, 2500)
 
-    cy.get('@foo').should('have.been.calledTwice')
+    cy.get("@foo").should("have.been.calledTwice")
   })
 
-  it('cy.stub() - create a stub and/or replace a function with stub', () => {
+  it("cy.stub() - create a stub and/or replace a function with stub", () => {
     // https://on.cypress.io/stub
-    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+    cy.visit("https://example.cypress.io/commands/spies-stubs-clocks")
 
     const obj = {
       /**
        * prints both arguments to the console
        * @param a {string}
        * @param b {string}
-      */
-      foo (a, b) {
-        console.log('a', a, 'b', b)
+       */
+      foo(a, b) {
+        console.log("a", a, "b", b)
       },
     }
 
-    const stub = cy.stub(obj, 'foo').as('foo')
+    const stub = cy.stub(obj, "foo").as("foo")
 
-    obj.foo('foo', 'bar')
+    obj.foo("foo", "bar")
 
     expect(stub).to.be.called
   })
 
-  it('cy.clock() - control time in the browser', () => {
+  it("cy.clock() - control time in the browser", () => {
     // https://on.cypress.io/clock
 
     // create the date in UTC so its always the same
@@ -72,12 +72,11 @@ context('Spies, Stubs, and Clock', () => {
     const now = new Date(Date.UTC(2017, 2, 14)).getTime()
 
     cy.clock(now)
-    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
-    cy.get('#clock-div').click()
-      .should('have.text', '1489449600')
+    cy.visit("https://example.cypress.io/commands/spies-stubs-clocks")
+    cy.get("#clock-div").click().should("have.text", "1489449600")
   })
 
-  it('cy.tick() - move time in the browser', () => {
+  it("cy.tick() - move time in the browser", () => {
     // https://on.cypress.io/tick
 
     // create the date in UTC so its always the same
@@ -85,42 +84,42 @@ context('Spies, Stubs, and Clock', () => {
     const now = new Date(Date.UTC(2017, 2, 14)).getTime()
 
     cy.clock(now)
-    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
-    cy.get('#tick-div').click()
-      .should('have.text', '1489449600')
+    cy.visit("https://example.cypress.io/commands/spies-stubs-clocks")
+    cy.get("#tick-div").click().should("have.text", "1489449600")
 
     cy.tick(10000) // 10 seconds passed
-    cy.get('#tick-div').click()
-      .should('have.text', '1489449610')
+    cy.get("#tick-div").click().should("have.text", "1489449610")
   })
 
-  it('cy.stub() matches depending on arguments', () => {
+  it("cy.stub() matches depending on arguments", () => {
     // see all possible matchers at
     // https://sinonjs.org/releases/latest/matchers/
     const greeter = {
       /**
        * Greets a person
        * @param {string} name
-      */
-      greet (name) {
+       */
+      greet(name) {
         return `Hello, ${name}!`
       },
     }
 
-    cy.stub(greeter, 'greet')
+    cy.stub(greeter, "greet")
       .callThrough() // if you want non-matched calls to call the real method
-      .withArgs(Cypress.sinon.match.string).returns('Hi')
-      .withArgs(Cypress.sinon.match.number).throws(new Error('Invalid name'))
+      .withArgs(Cypress.sinon.match.string)
+      .returns("Hi")
+      .withArgs(Cypress.sinon.match.number)
+      .throws(new Error("Invalid name"))
 
-    expect(greeter.greet('World')).to.equal('Hi')
-    expect(() => greeter.greet(42)).to.throw('Invalid name')
+    expect(greeter.greet("World")).to.equal("Hi")
+    expect(() => greeter.greet(42)).to.throw("Invalid name")
     expect(greeter.greet).to.have.been.calledTwice
 
     // non-matched calls goes the actual method
-    expect(greeter.greet()).to.equal('Hello, undefined!')
+    expect(greeter.greet()).to.equal("Hello, undefined!")
   })
 
-  it('matches call arguments using Sinon matchers', () => {
+  it("matches call arguments using Sinon matchers", () => {
     // see all possible matchers at
     // https://sinonjs.org/releases/latest/matchers/
     const calculator = {
@@ -128,13 +127,13 @@ context('Spies, Stubs, and Clock', () => {
        * returns the sum of two arguments
        * @param a {number}
        * @param b {number}
-      */
-      add (a, b) {
+       */
+      add(a, b) {
         return a + b
       },
     }
 
-    const spy = cy.spy(calculator, 'add').as('add')
+    const spy = cy.spy(calculator, "add").as("add")
 
     expect(calculator.add(2, 3)).to.equal(5)
 
@@ -142,7 +141,10 @@ context('Spies, Stubs, and Clock', () => {
     expect(spy).to.be.calledWith(2, 3)
 
     // let's confirm "add" method was called with two numbers
-    expect(spy).to.be.calledWith(Cypress.sinon.match.number, Cypress.sinon.match.number)
+    expect(spy).to.be.calledWith(
+      Cypress.sinon.match.number,
+      Cypress.sinon.match.number,
+    )
 
     // alternatively, provide the value to match
     expect(spy).to.be.calledWith(Cypress.sinon.match(2), Cypress.sinon.match(3))
@@ -162,7 +164,7 @@ context('Spies, Stubs, and Clock', () => {
     // expect the value to pass a custom predicate function
     // the second argument to "sinon.match(predicate, message)" is
     // shown if the predicate does not pass and assertion fails
-    expect(spy).to.be.calledWith(Cypress.sinon.match(isEven, 'isEven'), 3)
+    expect(spy).to.be.calledWith(Cypress.sinon.match(isEven, "isEven"), 3)
 
     /**
      * Returns a function that checks if a given number is larger than the limit
@@ -181,21 +183,28 @@ context('Spies, Stubs, and Clock', () => {
     // you can combine several matchers using "and", "or"
     expect(spy).to.be.calledWith(
       Cypress.sinon.match.number,
-      Cypress.sinon.match(isGreaterThan(2), '> 2').and(Cypress.sinon.match(isLessThan(4), '< 4')),
+      Cypress.sinon
+        .match(isGreaterThan(2), "> 2")
+        .and(Cypress.sinon.match(isLessThan(4), "< 4")),
     )
 
     expect(spy).to.be.calledWith(
       Cypress.sinon.match.number,
-      Cypress.sinon.match(isGreaterThan(200), '> 200').or(Cypress.sinon.match(3)),
+      Cypress.sinon
+        .match(isGreaterThan(200), "> 200")
+        .or(Cypress.sinon.match(3)),
     )
 
     // matchers can be used from BDD assertions
-    cy.get('@add').should('have.been.calledWith',
-      Cypress.sinon.match.number, Cypress.sinon.match(3))
+    cy.get("@add").should(
+      "have.been.calledWith",
+      Cypress.sinon.match.number,
+      Cypress.sinon.match(3),
+    )
 
     // you can alias matchers for shorter test code
     const { match: M } = Cypress.sinon
 
-    cy.get('@add').should('have.been.calledWith', M.number, M(3))
+    cy.get("@add").should("have.been.calledWith", M.number, M(3))
   })
 })
diff --git a/cypress/e2e/2-advanced-examples/storage.cy.js b/cypress/e2e/2-advanced-examples/storage.cy.js
index c138806..667156b 100644
--- a/cypress/e2e/2-advanced-examples/storage.cy.js
+++ b/cypress/e2e/2-advanced-examples/storage.cy.js
@@ -1,110 +1,116 @@
 /// <reference types="cypress" />
 
-context('Local Storage / Session Storage', () => {
+context("Local Storage / Session Storage", () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/storage')
+    cy.visit("https://example.cypress.io/commands/storage")
   })
   // Although localStorage is automatically cleared
   // in between tests to maintain a clean state
   // sometimes we need to clear localStorage manually
 
-  it('cy.clearLocalStorage() - clear all data in localStorage for the current origin', () => {
+  it("cy.clearLocalStorage() - clear all data in localStorage for the current origin", () => {
     // https://on.cypress.io/clearlocalstorage
-    cy.get('.ls-btn').click().should(() => {
-      expect(localStorage.getItem('prop1')).to.eq('red')
-      expect(localStorage.getItem('prop2')).to.eq('blue')
-      expect(localStorage.getItem('prop3')).to.eq('magenta')
-    })
+    cy.get(".ls-btn")
+      .click()
+      .should(() => {
+        expect(localStorage.getItem("prop1")).to.eq("red")
+        expect(localStorage.getItem("prop2")).to.eq("blue")
+        expect(localStorage.getItem("prop3")).to.eq("magenta")
+      })
 
     // clearLocalStorage() yields the localStorage object
     cy.clearLocalStorage().should((ls) => {
-      expect(ls.getItem('prop1')).to.be.null
-      expect(ls.getItem('prop2')).to.be.null
-      expect(ls.getItem('prop3')).to.be.null
+      expect(ls.getItem("prop1")).to.be.null
+      expect(ls.getItem("prop2")).to.be.null
+      expect(ls.getItem("prop3")).to.be.null
     })
 
-    cy.get('.ls-btn').click().should(() => {
-      expect(localStorage.getItem('prop1')).to.eq('red')
-      expect(localStorage.getItem('prop2')).to.eq('blue')
-      expect(localStorage.getItem('prop3')).to.eq('magenta')
-    })
+    cy.get(".ls-btn")
+      .click()
+      .should(() => {
+        expect(localStorage.getItem("prop1")).to.eq("red")
+        expect(localStorage.getItem("prop2")).to.eq("blue")
+        expect(localStorage.getItem("prop3")).to.eq("magenta")
+      })
 
     // Clear key matching string in localStorage
-    cy.clearLocalStorage('prop1').should((ls) => {
-      expect(ls.getItem('prop1')).to.be.null
-      expect(ls.getItem('prop2')).to.eq('blue')
-      expect(ls.getItem('prop3')).to.eq('magenta')
+    cy.clearLocalStorage("prop1").should((ls) => {
+      expect(ls.getItem("prop1")).to.be.null
+      expect(ls.getItem("prop2")).to.eq("blue")
+      expect(ls.getItem("prop3")).to.eq("magenta")
     })
 
-    cy.get('.ls-btn').click().should(() => {
-      expect(localStorage.getItem('prop1')).to.eq('red')
-      expect(localStorage.getItem('prop2')).to.eq('blue')
-      expect(localStorage.getItem('prop3')).to.eq('magenta')
-    })
+    cy.get(".ls-btn")
+      .click()
+      .should(() => {
+        expect(localStorage.getItem("prop1")).to.eq("red")
+        expect(localStorage.getItem("prop2")).to.eq("blue")
+        expect(localStorage.getItem("prop3")).to.eq("magenta")
+      })
 
     // Clear keys matching regex in localStorage
     cy.clearLocalStorage(/prop1|2/).should((ls) => {
-      expect(ls.getItem('prop1')).to.be.null
-      expect(ls.getItem('prop2')).to.be.null
-      expect(ls.getItem('prop3')).to.eq('magenta')
+      expect(ls.getItem("prop1")).to.be.null
+      expect(ls.getItem("prop2")).to.be.null
+      expect(ls.getItem("prop3")).to.eq("magenta")
     })
   })
 
-  it('cy.getAllLocalStorage() - get all data in localStorage for all origins', () => {
+  it("cy.getAllLocalStorage() - get all data in localStorage for all origins", () => {
     // https://on.cypress.io/getalllocalstorage
-    cy.get('.ls-btn').click()
+    cy.get(".ls-btn").click()
 
     // getAllLocalStorage() yields a map of origins to localStorage values
     cy.getAllLocalStorage().should((storageMap) => {
       expect(storageMap).to.deep.equal({
         // other origins will also be present if localStorage is set on them
-        'https://example.cypress.io': {
-          'prop1': 'red',
-          'prop2': 'blue',
-          'prop3': 'magenta',
+        "https://example.cypress.io": {
+          prop1: "red",
+          prop2: "blue",
+          prop3: "magenta",
         },
       })
     })
   })
 
-  it('cy.clearAllLocalStorage() - clear all data in localStorage for all origins', () => {
+  it("cy.clearAllLocalStorage() - clear all data in localStorage for all origins", () => {
     // https://on.cypress.io/clearalllocalstorage
-    cy.get('.ls-btn').click()
+    cy.get(".ls-btn").click()
 
     // clearAllLocalStorage() yields null
     cy.clearAllLocalStorage().should(() => {
-      expect(sessionStorage.getItem('prop1')).to.be.null
-      expect(sessionStorage.getItem('prop2')).to.be.null
-      expect(sessionStorage.getItem('prop3')).to.be.null
+      expect(sessionStorage.getItem("prop1")).to.be.null
+      expect(sessionStorage.getItem("prop2")).to.be.null
+      expect(sessionStorage.getItem("prop3")).to.be.null
     })
   })
 
-  it('cy.getAllSessionStorage() - get all data in sessionStorage for all origins', () => {
+  it("cy.getAllSessionStorage() - get all data in sessionStorage for all origins", () => {
     // https://on.cypress.io/getallsessionstorage
-    cy.get('.ls-btn').click()
+    cy.get(".ls-btn").click()
 
     // getAllSessionStorage() yields a map of origins to sessionStorage values
     cy.getAllSessionStorage().should((storageMap) => {
       expect(storageMap).to.deep.equal({
         // other origins will also be present if sessionStorage is set on them
-        'https://example.cypress.io': {
-          'prop4': 'cyan',
-          'prop5': 'yellow',
-          'prop6': 'black',
+        "https://example.cypress.io": {
+          prop4: "cyan",
+          prop5: "yellow",
+          prop6: "black",
         },
       })
     })
   })
 
-  it('cy.clearAllSessionStorage() - clear all data in sessionStorage for all origins', () => {
+  it("cy.clearAllSessionStorage() - clear all data in sessionStorage for all origins", () => {
     // https://on.cypress.io/clearallsessionstorage
-    cy.get('.ls-btn').click()
+    cy.get(".ls-btn").click()
 
     // clearAllSessionStorage() yields null
     cy.clearAllSessionStorage().should(() => {
-      expect(sessionStorage.getItem('prop4')).to.be.null
-      expect(sessionStorage.getItem('prop5')).to.be.null
-      expect(sessionStorage.getItem('prop6')).to.be.null
+      expect(sessionStorage.getItem("prop4")).to.be.null
+      expect(sessionStorage.getItem("prop5")).to.be.null
+      expect(sessionStorage.getItem("prop6")).to.be.null
     })
   })
 })
diff --git a/cypress/e2e/2-advanced-examples/traversal.cy.js b/cypress/e2e/2-advanced-examples/traversal.cy.js
index 0a3b9d3..c45233c 100644
--- a/cypress/e2e/2-advanced-examples/traversal.cy.js
+++ b/cypress/e2e/2-advanced-examples/traversal.cy.js
@@ -1,121 +1,116 @@
 /// <reference types="cypress" />
 
-context('Traversal', () => {
+context("Traversal", () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/traversal')
+    cy.visit("https://example.cypress.io/commands/traversal")
   })
 
-  it('.children() - get child DOM elements', () => {
+  it(".children() - get child DOM elements", () => {
     // https://on.cypress.io/children
-    cy.get('.traversal-breadcrumb')
-      .children('.active')
-      .should('contain', 'Data')
+    cy.get(".traversal-breadcrumb")
+      .children(".active")
+      .should("contain", "Data")
   })
 
-  it('.closest() - get closest ancestor DOM element', () => {
+  it(".closest() - get closest ancestor DOM element", () => {
     // https://on.cypress.io/closest
-    cy.get('.traversal-badge')
-      .closest('ul')
-      .should('have.class', 'list-group')
+    cy.get(".traversal-badge").closest("ul").should("have.class", "list-group")
   })
 
-  it('.eq() - get a DOM element at a specific index', () => {
+  it(".eq() - get a DOM element at a specific index", () => {
     // https://on.cypress.io/eq
-    cy.get('.traversal-list>li')
-      .eq(1).should('contain', 'siamese')
+    cy.get(".traversal-list>li").eq(1).should("contain", "siamese")
   })
 
-  it('.filter() - get DOM elements that match the selector', () => {
+  it(".filter() - get DOM elements that match the selector", () => {
     // https://on.cypress.io/filter
-    cy.get('.traversal-nav>li')
-      .filter('.active').should('contain', 'About')
+    cy.get(".traversal-nav>li").filter(".active").should("contain", "About")
   })
 
-  it('.find() - get descendant DOM elements of the selector', () => {
+  it(".find() - get descendant DOM elements of the selector", () => {
     // https://on.cypress.io/find
-    cy.get('.traversal-pagination')
-      .find('li').find('a')
-      .should('have.length', 7)
+    cy.get(".traversal-pagination")
+      .find("li")
+      .find("a")
+      .should("have.length", 7)
   })
 
-  it('.first() - get first DOM element', () => {
+  it(".first() - get first DOM element", () => {
     // https://on.cypress.io/first
-    cy.get('.traversal-table td')
-      .first().should('contain', '1')
+    cy.get(".traversal-table td").first().should("contain", "1")
   })
 
-  it('.last() - get last DOM element', () => {
+  it(".last() - get last DOM element", () => {
     // https://on.cypress.io/last
-    cy.get('.traversal-buttons .btn')
-      .last().should('contain', 'Submit')
+    cy.get(".traversal-buttons .btn").last().should("contain", "Submit")
   })
 
-  it('.next() - get next sibling DOM element', () => {
+  it(".next() - get next sibling DOM element", () => {
     // https://on.cypress.io/next
-    cy.get('.traversal-ul')
-      .contains('apples').next().should('contain', 'oranges')
+    cy.get(".traversal-ul")
+      .contains("apples")
+      .next()
+      .should("contain", "oranges")
   })
 
-  it('.nextAll() - get all next sibling DOM elements', () => {
+  it(".nextAll() - get all next sibling DOM elements", () => {
     // https://on.cypress.io/nextall
-    cy.get('.traversal-next-all')
-      .contains('oranges')
-      .nextAll().should('have.length', 3)
+    cy.get(".traversal-next-all")
+      .contains("oranges")
+      .nextAll()
+      .should("have.length", 3)
   })
 
-  it('.nextUntil() - get next sibling DOM elements until next el', () => {
+  it(".nextUntil() - get next sibling DOM elements until next el", () => {
     // https://on.cypress.io/nextuntil
-    cy.get('#veggies')
-      .nextUntil('#nuts').should('have.length', 3)
+    cy.get("#veggies").nextUntil("#nuts").should("have.length", 3)
   })
 
-  it('.not() - remove DOM elements from set of DOM elements', () => {
+  it(".not() - remove DOM elements from set of DOM elements", () => {
     // https://on.cypress.io/not
-    cy.get('.traversal-disabled .btn')
-      .not('[disabled]').should('not.contain', 'Disabled')
+    cy.get(".traversal-disabled .btn")
+      .not("[disabled]")
+      .should("not.contain", "Disabled")
   })
 
-  it('.parent() - get parent DOM element from DOM elements', () => {
+  it(".parent() - get parent DOM element from DOM elements", () => {
     // https://on.cypress.io/parent
-    cy.get('.traversal-mark')
-      .parent().should('contain', 'Morbi leo risus')
+    cy.get(".traversal-mark").parent().should("contain", "Morbi leo risus")
   })
 
-  it('.parents() - get parent DOM elements from DOM elements', () => {
+  it(".parents() - get parent DOM elements from DOM elements", () => {
     // https://on.cypress.io/parents
-    cy.get('.traversal-cite')
-      .parents().should('match', 'blockquote')
+    cy.get(".traversal-cite").parents().should("match", "blockquote")
   })
 
-  it('.parentsUntil() - get parent DOM elements from DOM elements until el', () => {
+  it(".parentsUntil() - get parent DOM elements from DOM elements until el", () => {
     // https://on.cypress.io/parentsuntil
-    cy.get('.clothes-nav')
-      .find('.active')
-      .parentsUntil('.clothes-nav')
-      .should('have.length', 2)
+    cy.get(".clothes-nav")
+      .find(".active")
+      .parentsUntil(".clothes-nav")
+      .should("have.length", 2)
   })
 
-  it('.prev() - get previous sibling DOM element', () => {
+  it(".prev() - get previous sibling DOM element", () => {
     // https://on.cypress.io/prev
-    cy.get('.birds').find('.active')
-      .prev().should('contain', 'Lorikeets')
+    cy.get(".birds").find(".active").prev().should("contain", "Lorikeets")
   })
 
-  it('.prevAll() - get all previous sibling DOM elements', () => {
+  it(".prevAll() - get all previous sibling DOM elements", () => {
     // https://on.cypress.io/prevall
-    cy.get('.fruits-list').find('.third')
-      .prevAll().should('have.length', 2)
+    cy.get(".fruits-list").find(".third").prevAll().should("have.length", 2)
   })
 
-  it('.prevUntil() - get all previous sibling DOM elements until el', () => {
+  it(".prevUntil() - get all previous sibling DOM elements until el", () => {
     // https://on.cypress.io/prevuntil
-    cy.get('.foods-list').find('#nuts')
-      .prevUntil('#veggies').should('have.length', 3)
+    cy.get(".foods-list")
+      .find("#nuts")
+      .prevUntil("#veggies")
+      .should("have.length", 3)
   })
 
-  it('.siblings() - get all sibling DOM elements', () => {
+  it(".siblings() - get all sibling DOM elements", () => {
     // https://on.cypress.io/siblings
-    cy.get('.traversal-pills .active')
-      .siblings().should('have.length', 2)
+    cy.get(".traversal-pills .active").siblings().should("have.length", 2)
   })
 })
diff --git a/cypress/e2e/2-advanced-examples/utilities.cy.js b/cypress/e2e/2-advanced-examples/utilities.cy.js
index 14934c2..8c6efc2 100644
--- a/cypress/e2e/2-advanced-examples/utilities.cy.js
+++ b/cypress/e2e/2-advanced-examples/utilities.cy.js
@@ -1,89 +1,90 @@
 /// <reference types="cypress" />
 
-context('Utilities', () => {
+context("Utilities", () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/utilities')
+    cy.visit("https://example.cypress.io/utilities")
   })
 
-  it('Cypress._ - call a lodash method', () => {
+  it("Cypress._ - call a lodash method", () => {
     // https://on.cypress.io/_
-    cy.request('https://jsonplaceholder.cypress.io/users')
-      .then((response) => {
-        let ids = Cypress._.chain(response.body).map('id').take(3).value()
+    cy.request("https://jsonplaceholder.cypress.io/users").then((response) => {
+      let ids = Cypress._.chain(response.body).map("id").take(3).value()
 
-        expect(ids).to.deep.eq([1, 2, 3])
-      })
+      expect(ids).to.deep.eq([1, 2, 3])
+    })
   })
 
-  it('Cypress.$ - call a jQuery method', () => {
+  it("Cypress.$ - call a jQuery method", () => {
     // https://on.cypress.io/$
-    let $li = Cypress.$('.utility-jquery li:first')
+    let $li = Cypress.$(".utility-jquery li:first")
 
     cy.wrap($li)
-      .should('not.have.class', 'active')
+      .should("not.have.class", "active")
       .click()
-      .should('have.class', 'active')
+      .should("have.class", "active")
   })
 
-  it('Cypress.Blob - blob utilities and base64 string conversion', () => {
+  it("Cypress.Blob - blob utilities and base64 string conversion", () => {
     // https://on.cypress.io/blob
-    cy.get('.utility-blob').then(($div) => {
+    cy.get(".utility-blob").then(($div) => {
       // https://github.com/nolanlawson/blob-util#imgSrcToDataURL
       // get the dataUrl string for the javascript-logo
-      return Cypress.Blob.imgSrcToDataURL('https://example.cypress.io/assets/img/javascript-logo.png', undefined, 'anonymous')
-      .then((dataUrl) => {
+      return Cypress.Blob.imgSrcToDataURL(
+        "https://example.cypress.io/assets/img/javascript-logo.png",
+        undefined,
+        "anonymous",
+      ).then((dataUrl) => {
         // create an <img> element and set its src to the dataUrl
-        let img = Cypress.$('<img />', { src: dataUrl })
+        let img = Cypress.$("<img />", { src: dataUrl })
 
         // need to explicitly return cy here since we are initially returning
         // the Cypress.Blob.imgSrcToDataURL promise to our test
         // append the image
         $div.append(img)
 
-        cy.get('.utility-blob img').click()
-          .should('have.attr', 'src', dataUrl)
+        cy.get(".utility-blob img").click().should("have.attr", "src", dataUrl)
       })
     })
   })
 
-  it('Cypress.minimatch - test out glob patterns against strings', () => {
+  it("Cypress.minimatch - test out glob patterns against strings", () => {
     // https://on.cypress.io/minimatch
-    let matching = Cypress.minimatch('/users/1/comments', '/users/*/comments', {
+    let matching = Cypress.minimatch("/users/1/comments", "/users/*/comments", {
       matchBase: true,
     })
 
-    expect(matching, 'matching wildcard').to.be.true
+    expect(matching, "matching wildcard").to.be.true
 
-    matching = Cypress.minimatch('/users/1/comments/2', '/users/*/comments', {
+    matching = Cypress.minimatch("/users/1/comments/2", "/users/*/comments", {
       matchBase: true,
     })
 
-    expect(matching, 'comments').to.be.false
+    expect(matching, "comments").to.be.false
 
     // ** matches against all downstream path segments
-    matching = Cypress.minimatch('/foo/bar/baz/123/quux?a=b&c=2', '/foo/**', {
+    matching = Cypress.minimatch("/foo/bar/baz/123/quux?a=b&c=2", "/foo/**", {
       matchBase: true,
     })
 
-    expect(matching, 'comments').to.be.true
+    expect(matching, "comments").to.be.true
 
     // whereas * matches only the next path segment
 
-    matching = Cypress.minimatch('/foo/bar/baz/123/quux?a=b&c=2', '/foo/*', {
+    matching = Cypress.minimatch("/foo/bar/baz/123/quux?a=b&c=2", "/foo/*", {
       matchBase: false,
     })
 
-    expect(matching, 'comments').to.be.false
+    expect(matching, "comments").to.be.false
   })
 
-  it('Cypress.Promise - instantiate a bluebird promise', () => {
+  it("Cypress.Promise - instantiate a bluebird promise", () => {
     // https://on.cypress.io/promise
     let waited = false
 
     /**
      * @return Bluebird<string>
      */
-    function waitOneSecond () {
+    function waitOneSecond() {
       // return a promise that resolves after 1 second
       return new Cypress.Promise((resolve, reject) => {
         setTimeout(() => {
@@ -91,7 +92,7 @@ context('Utilities', () => {
           waited = true
 
           // resolve with 'foo' string
-          resolve('foo')
+          resolve("foo")
         }, 1000)
       })
     }
@@ -100,7 +101,7 @@ context('Utilities', () => {
       // return a promise to cy.then() that
       // is awaited until it resolves
       return waitOneSecond().then((str) => {
-        expect(str).to.eq('foo')
+        expect(str).to.eq("foo")
         expect(waited).to.be.true
       })
     })
diff --git a/cypress/e2e/2-advanced-examples/viewport.cy.js b/cypress/e2e/2-advanced-examples/viewport.cy.js
index a06ae20..1192f3c 100644
--- a/cypress/e2e/2-advanced-examples/viewport.cy.js
+++ b/cypress/e2e/2-advanced-examples/viewport.cy.js
@@ -1,19 +1,19 @@
 /// <reference types="cypress" />
-context('Viewport', () => {
+context("Viewport", () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/viewport')
+    cy.visit("https://example.cypress.io/commands/viewport")
   })
 
-  it('cy.viewport() - set the viewport size and dimension', () => {
+  it("cy.viewport() - set the viewport size and dimension", () => {
     // https://on.cypress.io/viewport
 
-    cy.get('#navbar').should('be.visible')
+    cy.get("#navbar").should("be.visible")
     cy.viewport(320, 480)
 
     // the navbar should have collapse since our screen is smaller
-    cy.get('#navbar').should('not.be.visible')
-    cy.get('.navbar-toggle').should('be.visible').click()
-    cy.get('.nav').find('a').should('be.visible')
+    cy.get("#navbar").should("not.be.visible")
+    cy.get(".navbar-toggle").should("be.visible").click()
+    cy.get(".nav").find("a").should("be.visible")
 
     // lets see what our app looks like on a super large screen
     cy.viewport(2999, 2999)
@@ -24,32 +24,32 @@ context('Viewport', () => {
     // We added a cy.wait() between each viewport change so you can see
     // the change otherwise it is a little too fast to see :)
 
-    cy.viewport('macbook-15')
+    cy.viewport("macbook-15")
     cy.wait(200)
-    cy.viewport('macbook-13')
+    cy.viewport("macbook-13")
     cy.wait(200)
-    cy.viewport('macbook-11')
+    cy.viewport("macbook-11")
     cy.wait(200)
-    cy.viewport('ipad-2')
+    cy.viewport("ipad-2")
     cy.wait(200)
-    cy.viewport('ipad-mini')
+    cy.viewport("ipad-mini")
     cy.wait(200)
-    cy.viewport('iphone-6+')
+    cy.viewport("iphone-6+")
     cy.wait(200)
-    cy.viewport('iphone-6')
+    cy.viewport("iphone-6")
     cy.wait(200)
-    cy.viewport('iphone-5')
+    cy.viewport("iphone-5")
     cy.wait(200)
-    cy.viewport('iphone-4')
+    cy.viewport("iphone-4")
     cy.wait(200)
-    cy.viewport('iphone-3')
+    cy.viewport("iphone-3")
     cy.wait(200)
 
     // cy.viewport() accepts an orientation for all presets
     // the default orientation is 'portrait'
-    cy.viewport('ipad-2', 'portrait')
+    cy.viewport("ipad-2", "portrait")
     cy.wait(200)
-    cy.viewport('iphone-4', 'landscape')
+    cy.viewport("iphone-4", "landscape")
     cy.wait(200)
 
     // The viewport will be reset back to the default dimensions
diff --git a/cypress/e2e/2-advanced-examples/waiting.cy.js b/cypress/e2e/2-advanced-examples/waiting.cy.js
index 21998f9..1e71332 100644
--- a/cypress/e2e/2-advanced-examples/waiting.cy.js
+++ b/cypress/e2e/2-advanced-examples/waiting.cy.js
@@ -1,30 +1,32 @@
 /// <reference types="cypress" />
-context('Waiting', () => {
+context("Waiting", () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/waiting')
+    cy.visit("https://example.cypress.io/commands/waiting")
   })
   // BE CAREFUL of adding unnecessary wait times.
   // https://on.cypress.io/best-practices#Unnecessary-Waiting
 
   // https://on.cypress.io/wait
-  it('cy.wait() - wait for a specific amount of time', () => {
-    cy.get('.wait-input1').type('Wait 1000ms after typing')
+  it("cy.wait() - wait for a specific amount of time", () => {
+    cy.get(".wait-input1").type("Wait 1000ms after typing")
     cy.wait(1000)
-    cy.get('.wait-input2').type('Wait 1000ms after typing')
+    cy.get(".wait-input2").type("Wait 1000ms after typing")
     cy.wait(1000)
-    cy.get('.wait-input3').type('Wait 1000ms after typing')
+    cy.get(".wait-input3").type("Wait 1000ms after typing")
     cy.wait(1000)
   })
 
-  it('cy.wait() - wait for a specific route', () => {
+  it("cy.wait() - wait for a specific route", () => {
     // Listen to GET to comments/1
-    cy.intercept('GET', '**/comments/*').as('getComment')
+    cy.intercept("GET", "**/comments/*").as("getComment")
 
     // we have code that gets a comment when
     // the button is clicked in scripts.js
-    cy.get('.network-btn').click()
+    cy.get(".network-btn").click()
 
     // wait for GET comments/1
-    cy.wait('@getComment').its('response.statusCode').should('be.oneOf', [200, 304])
+    cy.wait("@getComment")
+      .its("response.statusCode")
+      .should("be.oneOf", [200, 304])
   })
 })
diff --git a/cypress/e2e/2-advanced-examples/window.cy.js b/cypress/e2e/2-advanced-examples/window.cy.js
index f94b649..5654e76 100644
--- a/cypress/e2e/2-advanced-examples/window.cy.js
+++ b/cypress/e2e/2-advanced-examples/window.cy.js
@@ -1,22 +1,22 @@
 /// <reference types="cypress" />
 
-context('Window', () => {
+context("Window", () => {
   beforeEach(() => {
-    cy.visit('https://example.cypress.io/commands/window')
+    cy.visit("https://example.cypress.io/commands/window")
   })
 
-  it('cy.window() - get the global window object', () => {
+  it("cy.window() - get the global window object", () => {
     // https://on.cypress.io/window
-    cy.window().should('have.property', 'top')
+    cy.window().should("have.property", "top")
   })
 
-  it('cy.document() - get the document object', () => {
+  it("cy.document() - get the document object", () => {
     // https://on.cypress.io/document
-    cy.document().should('have.property', 'charset').and('eq', 'UTF-8')
+    cy.document().should("have.property", "charset").and("eq", "UTF-8")
   })
 
-  it('cy.title() - get the title', () => {
+  it("cy.title() - get the title", () => {
     // https://on.cypress.io/title
-    cy.title().should('include', 'Kitchen Sink')
+    cy.title().should("include", "Kitchen Sink")
   })
 })
diff --git a/cypress/fixtures/profile.json b/cypress/fixtures/profile.json
index b6c355c..a95e88f 100644
--- a/cypress/fixtures/profile.json
+++ b/cypress/fixtures/profile.json
@@ -2,4 +2,4 @@
   "id": 8739,
   "name": "Jane",
   "email": "jane@example.com"
-}
\ No newline at end of file
+}
diff --git a/cypress/fixtures/users.json b/cypress/fixtures/users.json
index 79b699a..82a0056 100644
--- a/cypress/fixtures/users.json
+++ b/cypress/fixtures/users.json
@@ -229,4 +229,4 @@
       "bs": "target end-to-end models"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 698b01a..95857ae 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -34,4 +34,4 @@
 //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
 //     }
 //   }
-// }
\ No newline at end of file
+// }
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
index f80f74f..b6eca75 100644
--- a/cypress/support/e2e.ts
+++ b/cypress/support/e2e.ts
@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands"
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
\ No newline at end of file
+// require('./commands')
diff --git a/lib/const.ts b/lib/const.ts
index f52a196..63f4144 100644
--- a/lib/const.ts
+++ b/lib/const.ts
@@ -10,4 +10,3 @@ export function isBrowser(): boolean {
 export const appTitle = "Track AWS r/Start Labs"
 export const appDescription = "Keep Track Of AWS r/Start Labs"
 
-export const baseLink = isBrowser() ? window.location.origin : ""
diff --git a/lib/labs.ts b/lib/labs.ts
index 218479d..8fc13b6 100644
--- a/lib/labs.ts
+++ b/lib/labs.ts
@@ -374,4 +374,4 @@ export const weekEleven: Array<LabType> = [
     labId: 85,
     name: "192-[JAWS]-Lab - [Challenge] CloudFormation",
   },
-]
\ No newline at end of file
+]
diff --git a/lib/metadata-options.ts b/lib/metadata-options.ts
index ff3c3e3..23c8938 100644
--- a/lib/metadata-options.ts
+++ b/lib/metadata-options.ts
@@ -1,20 +1,21 @@
+import { appDescription, appTitle } from "@/lib/const"
 import type { Metadata } from "next"
-import { appDescription, appTitle, baseLink } from "@/lib/const"
 
 export const metaDataOptions: Metadata = {
+  metadataBase: new URL("https://aws-rstart-labs.vercel.app"),
   openGraph: {
     title: appTitle,
     description: appDescription,
-    url: baseLink,
+    url: "/",
     siteName: appTitle,
     images: [
       {
-        url: baseLink + "/aws-restart-logo.png",
+        url: "/aws-restart-logo.png",
         width: 800,
         height: 600,
       },
       {
-        url: baseLink + "/aws-restart-logo.png",
+        url: "/aws-restart-logo.png",
         width: 1800,
         height: 1600,
         alt: appTitle,
@@ -33,8 +34,8 @@ export const metaDataOptions: Metadata = {
     title: appTitle,
     description: appDescription,
     images: {
-      url: baseLink + "/aws-restart-logo.png",
-      alt: appTitle + " Logo",
+      url: "/aws-restart-logo.png",
+      alt: appTitle,
     },
   },
   robots: {
diff --git a/package-lock.json b/package-lock.json
index f17824b..8ca7912 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,8 @@
         "eslint": "^8",
         "eslint-config-next": "14.1.0",
         "postcss": "^8",
+        "prettier-plugin-organize-imports": "^3.2.4",
+        "prettier-plugin-tailwindcss": "^0.5.11",
         "tailwindcss": "^3.3.0",
         "typescript": "^5"
       }
@@ -5656,6 +5658,111 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-organize-imports": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-3.2.4.tgz",
+      "integrity": "sha512-6m8WBhIp0dfwu0SkgfOxJqh+HpdyfqSSLfKKRZSFbDuEQXDDndb8fTpRWkUrX/uBenkex3MgnVk0J3b3Y5byog==",
+      "dev": true,
+      "peerDependencies": {
+        "@volar/vue-language-plugin-pug": "^1.0.4",
+        "@volar/vue-typescript": "^1.0.4",
+        "prettier": ">=2.0",
+        "typescript": ">=2.9"
+      },
+      "peerDependenciesMeta": {
+        "@volar/vue-language-plugin-pug": {
+          "optional": true
+        },
+        "@volar/vue-typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.5.11",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.11.tgz",
+      "integrity": "sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        },
+        "prettier-plugin-twig-melody": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
diff --git a/package.json b/package.json
index a43860f..27e3be4 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "format": "prettier . --write",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run"
   },
@@ -32,6 +33,8 @@
     "eslint": "^8",
     "eslint-config-next": "14.1.0",
     "postcss": "^8",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }
diff --git a/postcss.config.js b/postcss.config.js
index 12a703d..33ad091 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}
diff --git a/service/requests.ts b/service/requests.ts
index 455eebb..a1486eb 100644
--- a/service/requests.ts
+++ b/service/requests.ts
@@ -1,6 +1,6 @@
+import { LabRequestType } from "@/types/Requests"
 import { LabResponseType } from "@/types/Responses"
 import Request from "./request-config"
-import { LabRequestType } from "@/types/Requests"
 
 export const getLabs = ({ email }: { email?: string }) => {
   return Request.get<{ labs: Array<LabResponseType> }>({
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7e4bd91..cbe7878 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,4 +1,4 @@
-import type { Config } from "tailwindcss";
+import type { Config } from "tailwindcss"
 
 const config: Config = {
   content: [
@@ -16,5 +16,5 @@ const config: Config = {
     },
   },
   plugins: [],
-};
-export default config;
+}
+export default config