bonus55 lesson

cypress/e2e/inventory/sort-names.cy.ts

@@ -0,0 +1,24 @@
+import { LoginPage } from '@support/pages/login.page'
+import { LoginInfo } from '..'
+
+describe('Products', { viewportHeight: 1600 }, () => {
+  const user: LoginInfo = Cypress.env('users').standard
+  beforeEach(() => {
+    LoginPage.login(user.username, user.password)
+
+    cy.visit('/inventory.html', { failOnStatusCode: false })
+    cy.location('pathname').should('equal', '/inventory.html')
+  })
+
+  it('retrieves each sort order name', () => {
+    // fetch the list of options from the sort order SELECT element
+    cy.getByTest('product_sort_container')
+    // confirm there are at least a couple
+    // map each OPTION element to its inner text
+    // using cypress-map query cy.map
+    // optional: print the list of names
+    //
+    // then select each sort name one by one
+    // and confirm the sorting name shown on the page matches
+  })
+})

cypress/support/commands.ts

@@ -20,8 +20,31 @@ Cypress.Commands.add(
   },
 )
 
-Cypress.Commands.add('getByTest', (testId) => {
-  const log = Cypress.log({ name: 'getByTest', message: testId })
-  // query the elements by the "data-test=..." attribute
-  cy.get(`[data-test="${testId}"]`)
-})
+Cypress.Commands.add(
+  'getByTest',
+  { prevSubject: 'optional' },
+  (parentElement, testId, text?: string) => {
+    console.log({ parentElement, testId })
+    const selector = `[data-test="${testId}"]`
+    if (text) {
+      const log = Cypress.log({
+        name: 'getByTest',
+        message: `${testId} "${text}"`,
+      })
+      // query the elements by the "data-test=..." attribute with the given text
+      if (parentElement) {
+        cy.wrap(parentElement, { log: false }).contains(selector, text)
+      } else {
+        cy.contains(selector, text)
+      }
+    } else {
+      const log = Cypress.log({ name: 'getByTest', message: testId })
+      // query the elements by the "data-test=..." attribute
+      if (parentElement) {
+        cy.wrap(parentElement, { log: false }).find(selector)
+      } else {
+        cy.get(selector)
+      }
+    }
+  },
+)

cypress/support/index.d.ts

@@ -12,10 +12,13 @@ declare namespace Cypress {
     fillForm(selectorsValues: object): Chainable<JQuery<HTMLFormElement>>
 
     /**
-     * Returns elements that have "data-test" attribute with the given value
+     * Returns elements that have "data-test" attribute with the given value.
+     * If you provide the text argument, it uses `cy.contains` to find a single
+     * element that includes the given text
      * @example
-     *  getByTest('checkout').should('be.visible')
+     *  cy.getByTest('CartCheckout').should('be.visible')
+     *  cy.getByText('UserName', 'Joe')
      */
-    getByTest(testId: string): Chainable<JQuery<HTMLElement>>
+    getByTest(testId: string, text?: string): Chainable<JQuery<HTMLElement>>
   }
 }