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()