add breadcrumbs spec

cypress/e2e/inventory/breadcrumbs.cy.ts

@@ -0,0 +1,28 @@
+import { LoginPage } from '@support/pages/login.page'
+import { LoginInfo } from '..'
+import { InventoryData } from '../../../src/utils/InventoryData'
+
+describe('Product', { viewportHeight: 1600 }, () => {
+  const user: LoginInfo = Cypress.env('users').standard
+  // we can even check if the user object is valid
+  if (!user) {
+    throw new Error('Missing the standard user')
+  }
+
+  // before each test, quickly login the user
+  // or restore the previous user session
+  beforeEach(() => {
+    LoginPage.login(user.username, user.password)
+  })
+
+  it('shows breadcrumbs', () => {
+    // pick a random item from the inventory data list
+    //
+    // and visit the item's page at "/inventory-item.html?id=..."
+    // confirm the browser remains on the item's page
+    // confirm the breadcrumbs are there showing the item's name
+    cy.log('**go to inventory using breadcrumbs link**')
+    // click on the breadcrumbs inventory link
+    // and confirm the browser navigates to the inventory
+  })
+})

src/pages/InventoryItem.css

@@ -9,6 +9,15 @@
   border: 2px solid #ededef;
 }
 
+.inventory_details .breadcrumbs {
+  color: white;
+  margin-bottom: 1rem;
+}
+
+.inventory_details .breadcrumbs a {
+  color: white;
+}
+
 .inventory_details_container .inventory_details_img_container {
   flex: 2;
   display: block;
@@ -26,15 +35,15 @@
 }
 
 .inventory_details_container .inventory_details_name {
-  font-family: "Roboto", Arial, Helvetica, sans-serif;
+  font-family: 'Roboto', Arial, Helvetica, sans-serif;
   font-size: 20px;
   font-weight: 500;
   color: #e2231a;
   margin-bottom: 15px;
 }
 
 .inventory_details_container .inventory_details_desc {
-  font-family: "Roboto", Arial, Helvetica, sans-serif;
+  font-family: 'Roboto', Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #777777;
   margin-bottom: 30px;
@@ -43,7 +52,7 @@
 .inventory_details_container .inventory_details_price {
   border-top: 2px solid #ededef;
   color: #e2231a;
-  font-family: "Roboto", Arial, Helvetica, sans-serif;
+  font-family: 'Roboto', Arial, Helvetica, sans-serif;
   font-size: 22px;
   display: inline-block;
   padding-top: 10px;