diff --git a/cypress.config.ts b/cypress.config.ts index 4f69bc3..8b53b74 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -5,6 +5,11 @@ export default defineConfig({ setupNodeEvents(on, config) { // implement node event listeners here }, + env:{ + home_url:"/", + exercises_url:"/danh-sach-bai-tap", + do_exercise_url:"/lam-bai", + }, projectId: 'kjhvhq', baseUrl: "http://localhost:3000/testing-cypress" }, diff --git a/cypress/e2e/navbar/header.cy.ts b/cypress/e2e/navbar/header.cy.ts new file mode 100644 index 0000000..ef055bd --- /dev/null +++ b/cypress/e2e/navbar/header.cy.ts @@ -0,0 +1,83 @@ +import { Header } from "../../pages/header"; + +describe("Test navigation", () => { + beforeEach(() => { + cy.login(); + cy.viewport('macbook-15') + + }) + + it("Have Logo to go home", () => { + const header = new Header(); + header.element.logoBtn().click(); + cy.location().should((location) => { + expect(location.hash).to.be.empty + expect(location.href).to.eq('http://localhost:3000/testing-cypress/') + expect(location.host).to.eq('localhost:3000') + expect(location.hostname).to.eq('localhost') + expect(location.origin).to.eq('http://localhost:3000') + expect(location.pathname).to.eq('/testing-cypress/') + expect(location.port).to.eq('3000') + expect(location.protocol).to.eq('http:') + expect(location.search).to.be.empty + }) + }); + + it("Test Search with keyword 'hoa'", () => { + const header = new Header(); + header.enterSearchInput("hoa"); + header.clickSearchButton(); + + // have pagination + cy.get("#componentContainer > li").should('have.length', 7); + + // total 74 page + cy.get("#componentContainer > li").eq(5).should('have.text', '74'); + }) + + it("Load page exercise", () => { + cy.visit(Cypress.env('exercises_url')+'/bai-tap-tieng-anh'); + cy.wait(2000); + cy.get(".min-h-screen").first().within(()=>{ + cy.get("a").should("have.length", 10); + }) + + cy.get("#componentContainer > li").eq(5).should('have.text', '10'); + }); + + it("Do exercise", () => { + cy.visit(Cypress.env('exercises_url')+'/bai-tap-tieng-anh'); + cy.wait(2000); + + cy.get(".min-h-screen").first().within(()=>{ + cy.get("a").eq(2).click(); + }) + + cy.wait(2000); + // each question have 4 options + cy.get("h1 > p").each(($el, index) => { + cy.wrap($el).parent().parent().find("p > label").should("have.length", 3); + // select random answer + cy.wrap($el).parent().parent().find("p > input").eq(index%3).check(); + }); + + cy.get("button[type='button']").click(); + cy.wait(2000); + + // check result + cy.get("span").should("have.text", "11/20") + cy.get("h1").last().should("have.text", "5.5") + + // have 3 buttons control + cy.get("button > i").should("have.length", 3); + cy.get("button > i").first().parent().contains("Thử làm lại"); + cy.get("button > i").eq(1).parent().contains("Xem đáp án chi tiết"); + cy.get("button > i").last().parent().contains("Làm các đề khác"); + + // have quote + cy.wait(1000); + cy.get("i > b").invoke('text').then((text) => { + expect(text.trim().length).to.greaterThan(0); + }); + }) +}) \ No newline at end of file diff --git a/cypress/pages/header.ts b/cypress/pages/header.ts new file mode 100644 index 0000000..024a43c --- /dev/null +++ b/cypress/pages/header.ts @@ -0,0 +1,17 @@ +export class Header { + element = { + logoBtn: () => cy.contains("a", "Baitaptracnghiem"), + searchOpen:()=> cy.get("button>span").contains("span", "tìm kiếm"), + searchInput:()=> cy.get("#simple-search"), + searchBtn: ()=> cy.get("button[type='submit']"), + } + + enterSearchInput(text: string){ + this.element.searchOpen().click(); + this.element.searchInput().type(text); + } + + clickSearchButton(){ + this.element.searchBtn().click(); + } +} diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 698b01a..d60c6fa 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -34,4 +34,10 @@ // visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable // } // } -// } \ No newline at end of file +// } + +Cypress.Commands.add('login', () => { + cy.visit(Cypress.env('home_url')) + cy.wait(2000) +}) + diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts index f80f74f..bebc1ff 100644 --- a/cypress/support/e2e.ts +++ b/cypress/support/e2e.ts @@ -1,18 +1,3 @@ -// *********************************************************** -// This example support/e2e.ts 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' diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts new file mode 100644 index 0000000..0845575 --- /dev/null +++ b/cypress/support/index.d.ts @@ -0,0 +1,5 @@ +declare namespace Cypress { + interface Chainable { + login(): Chainable + } +} \ No newline at end of file