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