M1

cypress.config.js

@@ -2,6 +2,7 @@ const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
   e2e: {
+    baseUrl: 'https://demoqa.com',
     setupNodeEvents(on, config) {
     }
   }

cypress/e2e/bookStore.cy.js

@@ -1,11 +1,28 @@
 /// <reference types='cypress' />
 
-describe('Book Store app', () => {
-  before(() => {
+const { userInfo, bookData } = require("../support/userData");
 
+describe("Book Store app", () => {
+  const { username, password } = userInfo();
+  const { title, author, publisher } = bookData();
+
+  beforeEach(() => {
+    cy.visit("/register");
   });
 
-  it('', () => {
+  it("should provide the ability to logged in", () => {
+    cy.loginByUI(username, password);
+  });
 
+  it("should provide the ability to add a book", () => {
+    cy.loginByApi(username, password);
+    cy.visit("/books");
+    cy.get("#searchBox").type(title);
+    //cy.get('.rt-td').eq(1).should('contain', book.title)
+    cy.assertBook(1, title);
+    //cy.get('.rt-td').eq(2).should('contain', book.author)
+    cy.assertBook(2, author);
+    //cy.get('.rt-td').eq(3).should('contain', book.publisher)
+    cy.assertBook(3, publisher);
   });
 });

cypress/support/commands.js

@@ -1,25 +1,24 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+Cypress.Commands.add("loginByApi", (username, password) => {
+  cy.request("POST", "https://demoqa.com/Account/v1/Login", {
+    userName: username,
+    password: password,
+  }).then((response) => {
+    cy.setCookie("token", response.body.token);
+    cy.setCookie("userID", response.body.userId);
+    cy.setCookie("expires", response.body.expires);
+    cy.setCookie("userName", response.body.username);
+  });
+});
+
+Cypress.Commands.add("assertBook", (id, book) => {
+  cy.get(".rt-td").eq(id).should("contain", book);
+});
+
+Cypress.Commands.add("loginByUI", (username, password) => {
+  cy.contains("#item-0", "Login").click();
+  cy.get('[placeholder="UserName"]').type(username);
+  cy.get('[placeholder="Password"]').type(password);
+  cy.contains("#login", "Login").click();
+  cy.get("#userName-value").should("contain", username);
+  cy.url().should("include", "profile");
+});

cypress/support/e2e.js

@@ -1,19 +1,3 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
 import './commands';
 
 // Alternatively you can use CommonJS syntax:

cypress/support/userData.js

@@ -0,0 +1,16 @@
+function userInfo() {
+  let username = "Gusith";
+  let password = "Gusith1!_";
+
+  return { username, password };
+}
+
+function bookData() {
+  let title = "Speaking JavaScript";
+  let author = "Axel Rauschmayer";
+  let publisher = "O'Reilly Media";
+
+  return { title, author, publisher };
+}
+
+module.exports = { userInfo, bookData };