Phân biệt giữa SEVERITY và PRIORITY

Report in Cypress

Step 1: Installation

i. Install mocha

npm install mocha --save-dev 

ii. Install cypress-multi-reporters

npm install cypress-multi-reporters --save-dev

iii. Install mochawesome

npm install mochawesome --save-dev

iv. Install mochawesome-merge

npm install mochawesome-merge --save-dev

v. Install mochawesome-report-generator

npm install mochawesome-report-generator --save-dev

Step 2: Add reporter settings in cypress.json

 "reporter": "cypress-multi-reporters",

  "reporterOptions": {

    "reporterEnabled": "mochawesome",

    "mochawesomeReporterOptions": {

      "reportDir": "cypress/reports/mocha",

      "quite": true,

      "overwrite": false,

      "html": false,

      "json": true

    }

  }

}

Step 3: Add scripts in package.json file

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "start": "cypress open",

    "clean:reports": "rmdir /S /Q cypress\\reports && mkdir 

cypress\\reports && mkdir cypress\\reports\\mochareports",

    "pretest": "npm run clean:reports",

    "scripts": "cypress run",

    "combine-reports": "mochawesome-merge 

cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",

    "generate-report": "marge cypress/reports/mochareports/report.json 
-f report -o cypress/reports/mochareports",

    "posttest": "npm run combine-reports && npm run generate-report",

    "test1": "npm run scripts || npm run posttest"

  },

Step 4: Run testcase

npm run test1

Report in:

Cypress/Reports/Mochareports/report.html

Xpath cách cài đặt và ứng dụng

0. Định nghĩa:

- Vui lòng search google.

1. Cài đặt:

- npm install -D cypress-xpath

2. Thiết lập trong file cypress/support/index.js

- require('cypress-xpath')

3. Thực hành:

- Truy cập link: Xpath Diner - Where we feast on Xpath Selectors!

4. Support:

- Chrome có Chropath (cài extension).

- Firefox thì chỉ cần copy và chọn copy xpath.

Bài 3: Đoạn code mẫu đơn giản

Ví dụ về đoạn code cơ bản trong Cypress

//Ví dụ về đoạn code cơ bản trong Cypress

//Mô tả function
describe('sign-in successfully', function() {

//Mô tả summary của testcase
it('should sign in successfully', function() {

//Steps
//truy cập vào trang web 
cy.visit('https://blabla.com')

//nhập username 
cy.get('#username').type('Nhựt đẹp trai')

//nhập password 
cy.get('#password').type('123')

//click sign-in button
cy.get('#button').click()

//verify expected result
cy.url().should('include', 'chứa đoạn url')

})
})

Bài 1: Cách cài đặt Cypress

1. Cypress là gì?

- Cypress là front end testing tool được xây dựng cho các ứng dụng Web hiện đại.

- Đây là một công cụ hỗ trợ hữu hiệu cho developers và QA trong kiểm thử ứng dụng Web hiện đại.

- Cypress được xây dựng trên một kiến trúc mới và chạy trong cùng vòng lặp chạy khi ứng dụng đang được thử nghiệm.

- Cypress thường được so sánh với Selenium. Nhưng Cypress hoàn toàn khác biệt với Selenium và nó không gặp phải các hạn chế như Selenium ==> Điều này giúp chúng ta thực thi các Test Cases một cách đơn giản và dễ dàng hơn.

Cypress hỗ trợ:

• Set up tests
• Write tests
• Run tests
• Debug Tests

2. Đối tượng sử dụng Cypress

Thường thì những đối tượng sử dụng Cypress là developers hoặc QA khi xây dựng một ứng dụng Web có sử dụng Javascript framework.

3. Cài đặt Cypress

- Sau khi cài đặt npm, node.js, Visual Studio...

Sử dụng Visual Studio để cài đặt cypress

- Cài package.json ==> npm init

- Cài cypress ==> npm install cypress --dev-save

- Run test cypress ==> npx cypress open

- Tạo file.js trong folder cypress/ integration (đặt tên là aaa.spec.js)

- Vào file aaa.spec.js viết code chạy automation

Bài 2: Các lệnh thường được sử dụng

Các lệnh thường được sử dụng

Một số cách get locator cơ bản:

Đối với id: #id

Đối với class: .class

Đối với tên thẻ a: ’a[thuộc_tính=”value”]’

--------------------------------------------------------------------------------------------------

Một số hàm:

cy.get('locator').type('text')

cy.get(‘locator’).click()

cy.get('input[formcontrolname="email"]').type('w1@gmail.com')

cy.contains('text')

--------------------------------------------------------------------------------------------------

visit() — Visit a remote URL

get() — To find DOM elements

contains — Get the DOM element containing the text

find() — Get the descendent DOM elements of a specific selector

click() — Click on the elements that you already got

type() — The input text

should() — assertions

fixture() — Load a fixed set of data located in a file

--------------------------------------------------------------------------------------------------

**Giải thích rõ hơn về 1 số "cy":

• cy.viewport (HEIGHT, WIDTH): Lệnh này thay đổi kích thước màn hình theo giá trị được cung cấp
• cy.visit ('URL'): Phương thức này là phương thức điều hướng cho Cypress. Nó gọi URL đã cho
• cy.get ('locator'): Phương thức này lấy một đối số là trình định vị CSS của phần tử web mà chúng ta muốn tương tác.
• cy.get ('locator'). type ('INPUT'): Phương thức này cho phép bạn điền vào các trường đầu vào.
• cy.get ('locator'). click (): Phương thức này cho phép bạn click vào một đối tượng có thể click ( Ví dụ như 1 button).
• cy.get ('locator'). contains('EXPECTED_VALUE'): Phương thức này đưa ra sự xác nhận cho thành phần web mà bạn đã chỉ định.

--------------------------------------------------------------------------------------------------

Giải thích 1 vài BDD Syntax:

describe('Hooks', function() {

  before(function() {

    // runs once before all tests in the block

  })

  after(function() {

    // runs once after all tests in the block

  })

  it(function() {

    // runs once after all tests in the block

    // The script function gets the topic content

  })

  it.only(function() {

    // runs once after all tests in the block

    // All code under it() does not execute except for code under it()

  })

  it.skip(function() {

    // runs once after all tests in the block

    // The code under it skips execution

  })

  beforeEach(function() {

    // runs before each test in the block

  })

  afterEach(function() {

    // runs after each test in the block

  })

})

-------------------------------------------------------------------------------------------------------

Lệnh hỗ trợ run automation khi web bị 1 lỗi gì đó chưa xác định:

Cypress.on('uncaught:exception', (err, runnable) => {return false})

-------------------------------------------------------------------------------------------------------

Tips:

Cài trong cypress.json:

{

  "chromeWebSecurity": false,

  "viewportWidth": 1000,

  "viewportHeight": 1660,

  "defaultCommandTimeout": 10000

}

--------------------------------------------------------------------------------

Cách get iframe khi trang web có nhúng iframe

cy.get('iframe').first().then(($iframe) => {

const $body = $iframe.contents().find('body')

cy.wrap($body).find('.comp-name-title').contains('Hải Âu').first().parents('.result-item').within(() => {

cy.wrap($body).contains('Chọn chỗ').click()

})

})

--------------------------------------------------------------------------------
Tạo hàm cho các giá trị value thay đổi:

Cách 1:

Nếu có iframe thì thêm $body

function informationUser($body, name, phone, email) {
cy.wrap($body).find('#cfn').type(name)
cy.wrap($body).find('#cp').type(phone)
cy.wrap($body).find('#ce').type(email)
}

Nếu không có iframe:

function informationUser(name, phone, email) {
cy.get('#cfn').type(name)
cy.get('#cp').type(phone)
cy.get('#ce').type(email)
}

Sau đó chạy hàm informationUser(biến name, biến phone, biến email)

Cách 2:

const bookingUser = {

    name: 'Nhut-test',

    phoneNumber: '0908089621',

    email: 'plmnhut@gmail.com'

  }

Sau đó (Nếu có iframe)

cy.wrap($body).find('#cfn').type(bookingUser.name)

cy.wrap($body).find('#cp').type(bookingUser.phoneNumber)

cy.wrap($body).find('#ce').type(bookingUser.email)

Nếu không có iframe:

cy.get('#cfn').type(bookingUser.name)

cy.get('#cp').type(bookingUser.phoneNumber)

cy.get('#ce').type(bookingUser.email)

--------------------------------------------------------------------------------

Khi có nhiều data cần test:

Describe ('', function(){ 

// đăng nhập với nhiều data

  [

    {

      email: 'a@b.c',

      password: '123'

    },

    {

      email: 'a1@b.c',

      password: '123'

    }

  ].forEach((user) => {

    it('login for ${user.email}', () => {

      cy.get('input#email').type(user.email)
cy.get('input#password').type(user.password)

    })

  })

--------------------------------------------------------------------------------

Khi get locator mà cần phải get thêm parents thì:

   cy.get(".btn.btn-sm.bg-none.circle.active") //Nút cần click

      .parents(".available") //Nút nằm trong parent có class là available

      .within(() => {

        cy.contains("B") //Nút có chứa chữ B

          .first()

          .click();

      });

--------------------------------------------------------------------------------
Cài đặt moment:

npm install moment --save

Gọi hàm const:

//Để ở ngoài dòng describe

const moment = require('moment')

describe('Find ticket', function() {

  // // đăng nhập với nhiều data

--------------------------------------------------------------------------------
Example Tạo hàm selectDate:

function selectDate(date) {

  cy.get(".ant-calendar-picker-icon").click()

  cy.get('td[title="' + date + '"]').click()

--------------------------------------------------------------------------------

Gọi hàm const nếu muốn chọn date là tomorror:

const date = moment().add(1, "days");

  const month = date.month() + 1;

  const day = date.date();

  const year = date.year();
//Ghép chuỗi ngày tháng năm
const dateString = `${day} tháng ${month} năm ${year}`;
selectDate(dateString);

(tham khảo thêm trên trang momentjs.com)

--------------------------------------------------------------------------------

Tham khảo các lệnh run trong Cypress:

https://docs.cypress.io/guides/guides/command-line.html#cypress-run

--------------------------------------------------------------------------------

Cài đặt nút TAB trong cypress

Cài tab: npm install -D cypress-plugin-tab

At the top of cypress/support/index.js:

require('cypress-plugin-tab')

-------------------------------------------------------------------------------

-Cách import từ 1 file.js vào file#.js

Tạo chonchuyen.spec.js

export default function chonchuyen() {

//Viết function

}

Import chonchuyen.spec.js vào file2.js => gõ lệnh import in file2.js

import chuyen from "./chonchuyen.spec"
chuyen()