What is Cypress ? Cypress adalah tools yang generasi baru yang dibuat untuk menguji coba modern web. Yang memungkinkan untuk :
- Melakukan Setup
- Melakukan Scripting
- Melakukan Testing
- Melakukan Debugging
Cypress paling sering dibandingkan dengan Selenium Namun Cypress berbeda secara fundamental dan arsitektur.
Cypress memungkinkan Anda untuk menulis semua jenis tes yaitu :
- End-to-end tests
- Integration tests
- Unit tests
System Requirement
- macOS 10.9 and above (64-bit only)
- Linux Ubuntu 12.04 and above, Fedora 21 and Debian 8 (64-bit only)
- Windows 7 and above
System Requirement Jika anda menggunakan npm
untuk menginstall Cypress diharuskan :
- Node.js 8 and above
$ apt-get install libgtk2.0-0 libgtk-3-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
$ yum install -y xorg-x11-server-Xvfb gtk2-devel gtk3-devel libnotify-devel GConf2 nss libXScrnSaver alsa-lib
Install Cypress via npm
$ cd /your/project/path
npm install cypress --save-dev
Install Cypress via yarn add
$ cd /your/project/path
yarn add cypress --dev
Download disini untuk versi Desktop
Jika Anda menggunakan npm
sewaktu menginstall, Cypress bisa dijalankan lewat ./node_modules
dan dapat diakses melalui binary executable dengan ./node_modules/.bin
$./node_modules/.bin/cypress open
Open via npm bin
$(npm bin)/cypress open
Open via npx
$ npx cypress open
Open via yarn
$ yarn run cypress open
Akan jauh lebih mudah dan cepat ketika menambahkan scripts ke package.json
file
{
"scripts": {
"cypress:open": "cypress open"
}
}
Kemudian kita bisa menjalankannya dengan command
$ npm run cypress:open
Clone Repository
https://github.com/fathurifki/cypressio-learn
Lalu jalankan dengan command git clone
Apabila menggunakan SSH
:
$ git clone git@github.com:fathurifki/cypressio-learn.git
Apabila menggunakan HTTPS
:
$ git clone https://github.com/fathurifki/cypressio-learn.git
Setelah itu lakukan installasi menggunakan npm install
Jalankan Project dengan command npx cypress open
Setelah menjalankan dengan command npx cypress open
membuka UI Console Cypress dan secara otomatis akan generate 4 folder ini :
Folder | Description |
---|---|
Fixture | Menyimpan Static Data. |
Integration | Semua file test berada di dalam folder integration ini dan file extension .js, sedangkan .spec hanya sebagai naming convention. |
Plugins | Plugin memungkinkan untuk memodifikasi behaviour Cypress. |
Support | Berisi command. js dan index.js, isi dari index.js menyimpan global configuration. |
File | Description |
---|---|
Cypress.json | Untuk menyimpan base url, port, environment dll |
Basic Script Cypress
Pertama kita buat terlebih dahulu file di dalam folder integration dengan format <nama_file>.spec.js
sebagai contoh :
BasicScript.spec.js
BasicScript.spec.js
/// <reference types="cypress" />
describe('First Test', () => {
it('Google Visit', () => {
cy.visit('https://google.co.id')
})
})
Kita bisa menyerdahanakan script refrence dengan cara membuat konfigurasi di root folder project dengan nama file jsonconfig.json
lalu tuliskan configurasi script seperti ini :
{
"includes":[
"./node_modules/cypress",
"cypress/**/*.js"
]
}
Alhasil kita tidak perlu lagi untuk menulis reference berulang ketika kita akan menuliskan script
describe('First Test', () => {
it('Google Visit', () => {
cy.visit('https://google.co.id')
})
})
Setelah itu jalankan npx cypress open
dan jalankan testnya,
Mari kita coba dengan menuliskan test pertama kita,
- Jalankan command dengan
npm start
atauyarn start
- Kemudian buat file dengan nama yang bebas dengan naming convention yang sesuai dengan ekstensi
.spec.js
- Kembali ke halaman web dengan alamat
http://localhost:3000
- Disini ada tampilan halaman prototype login sebagai awal test coba kita menginputkan email dan password serta bisa melakukan action button submit
- Lalu inputkan Script seperti berikut :
describe('Login', function () { it('Sign in', function () { cy.visit('http://localhost:3000/') cy.get('input[type="text"]').type('jhondoe@gmail.com') cy.get('input[type="password"]').type('12345678') cy.get('button.MuiButtonBase-root.MuiButton-root.MuiButton-contained.makeStyles-submit-4.MuiButton-containedPrimary.MuiButton-fullWidth').contains('Sign In').click() cy.get('div.MuiBackdrop-root').click({force: true}) }) })
- Kemudian jalankan UI Console Cypress untuk menjalankan testnya dengan command
npx cypress open
Catatan : 1. Get : Untuk mengambil DOM elements, 2. Contains: Untuk mendapatkan elemen DOM berupa spesifik teks yang inginkan
Pada bagian ini akan membahas lebih lanjut bagaimana mengidentifikasi sebuah element untuk melakukan testing
Scenario Test :
- Jalankan terlebih dahulu websitenya dengan link https://ecstatic-mahavira-dcba2a.netlify.app
- Kemudian membuat test mulai dari visit Link untuk Sign Up
- Kemudian membuat test untuk mengisi halaman Login
- Kemudian membuat test untuk mengisi halaman Profile
Testing :
5. Untuk mengidentifikasi Element cukup membuka console website, Kemudian kita arahkan componentnya,
6. Pada case ini, element textfield email dan password di wrap oleh form disarankan untuk menggunakan within( ), within pada cypress adalah command yang digunakan ketika ada grouping pada sebuah element
7. Membuat Script untuk Sign Up :
describe('Identify Element', ( ) => {
it('Sign Up', () => {
cy.visit('https://ecstatic-mahavira-dcba2a.netlify.app/')
cy.contains(`Don't have an account? Sign Up`).click()
cy.get('form').within(($form) => {
cy.fixture('userCredential').then(user => {
cy.get('input[type="text"]').type(user.email)
cy.get('input[type="password"]').type(user.password)
cy.root().submit()
})
})
cy.wait(500)
cy.contains('OK').click()
cy.location().should((location) => {
expect(location.pathname).to.eq('/register')
})
})
})
-
Membuat Script untuk Sign In :
describe('Identify Element', ( ) => { .... //Sign In it('Sign in', function () { cy.visit('https://ecstatic-mahavira-dcba2a.netlify.app/') cy.get('form').within(($form) => { cy.get('input[type="text"]').type('boboi@gmail.com') cy.get('input[type="password"]').type('boboi123') cy.root().submit() }) cy.wait(500) cy.location().should((location) => { expect(location.pathname).to.eq('/') }) }) })
-
Membuat Script untuk Profile :
describe('Identify Element', ( ) => { ... // Sign Up ... // Sign In it('Create Profile', function () { cy.contains('Profile').click({ force: true }) cy.get('form').within(($form) => { cy.get('input').first().type('boboi@gmail.com') cy.get('input').eq(1).type('08571529181') cy.get('input').eq(2).type('Kauman') cy.get('input').eq(3).type('Yogyakarta') cy.get('input').eq(4).type('BCA') cy.get('input').eq(5).type('02020911111') cy.get('input').eq(6).type('Mandiri') cy.get('input').last().type('01019484849') cy.root().submit() }) cy.contains('OK').click() cy.location().should((location) => { expect(location.pathname).to.eq('/products') }) })
Tujuan untuk membuat Custom Commands ini membuat function dan dapat digunakan kembali tanpa harus teman-teman membuat ulang script tersebut (Reusable Function)
Step :
-
Buka terlebih dahulu folder Support => file Commands
-
Lalu tambahkan command :
Cypress.Commands.add(() => { ...//script })
Sebagai contoh Function Sign In :
Cypress.Commands.add('SignIn', () => { cy.visit('https://ecstatic-mahavira-dcba2a.netlify.app/') cy.get('form').within(($form) => { cy.get('input[type="text"]').type('jhondoe@gmail.com') cy.get('input[type="password"]').type('12345678') cy.root().submit() }) cy.wait(500) cy.location().should((location) => { expect(location.pathname).to.eq('/') }) })
-
Penggunaan Custom Commands sama seperti memanggil Commands Cypress umumnya :
describe('Sign In', ( ) => { cy.SignIn( ) })
Pada Configuration Cypress memberikan ruang leluasa untuk membuat konfigurasi secara dinamis , Bisa menginputkan secara global :
1. baseUrl
2. Timeout Value
3. Folders / Files
4. Screenshots & video
5. Serta Manipulate Browser Settings
Steps :
- Membuka file
cypress.json
- Lalu tambahkan saja value yang diinginkan di dalam
cypress.json
(sebagai contoh disini adalah baseUrl) :{ “baseUrl” : “https://ecstatic-mahavira-dcba2a.netlify.app” }
- Lalu kita rubah value cy.visit sesuai dengan prefix routes web yang kita inginkan atau sudah ditentukan pada website tersebut sebagai contoh :
describe('SignIn', () => { cy.visit('/') })
- Lalu apply disemua file yang menggunakan base Url
Pada fixture bisa menaruh file test file berbentuk image, video ,audio, serta file test yang berekstensi .json yang nantinya kita cukup memanggil file fixture tersebut sesuai kebutuhan
Sebagai contoh kita membuat sebuah Credential untuk Login, buat file userLoginCredential.json lalu isikan script
//cypress > fixture > userLoginCredential.json
{
email: ... //describe your email
password: ... //describe your password
}
Lalu kita buat script testnya :
//cypress > integration > ConfigurationScript.json
describe('Login', function () {
it('Sign in', function () {
cy.visit('[http://localhost:3000/](http://localhost:3000/)')
cy.fixture(‘userLoginCredential’).then(user => {
cy.get('input[type="text"]').type(user.Email)
cy.get('input[type="password"]').type(user.Password)
})
cy.get('button.MuiButtonBase-root.MuiButton-root.MuiButton-contained.makeStyles-submit-4.MuiButton-containedPrimary.MuiButton-fullWidth').contains('Sign In').click()
})
})
Jalankan testing npx cypress open
untuk membuka ui consolenya
Pertama-tama Install terlebih dahulu library dari NPM cypress-file-upload
npm install cypress-file-upload
Cara penggunaannya (Syntax) :
const picture = 'melon.jpg' // simpan terlebih dahulu filenya di dalam folder Fixture
cy.get('input[type=file]') // Get element untuk input
.attachFile(picture) // attach file dari variable yang kita declare diatas
Contoh penggunaan
//cypress > integration > CreateProduct.spec.json
describe('Input Product' , ( ) => {
it('Create Product', () => {
cy.contains('Input Product').click()
cy.get('form').within(($form) => {
cy.get('input').first().type('Buah Melon')
cy.get('input').eq(1).type('Buah-Buahan')
cy.get('input').eq(2).type('10000')
cy.get('input').eq(3).type('20')
cy.get('input').eq(4).type('10')
cy.get('input').eq(5).type('Buah Melon Yang Segar')
const picture = 'melon.jpg'
cy.get('input[type=file]')
.attachFile(picture)
cy.root().submit()
})
cy.wait(600)
cy.contains('OK').click()
cy.location().should((location) => {
expect(location.pathname).to.eq('/products')
})
})
})
Jalankan testing npx cypress open
untuk membuka ui consolenya
Pertama instalasi terlebih dahulu library dibawah ini :
Install mocha :
npm install mocha --save-dev
Install cypress-multi-reporters :
npm install cypress-multi-reporters --save-dev
Install mochawesome :
npm install mochawesome --save-dev
Install mochawesome-merge :
npm install mochawesome-merge --save-dev
Install mochawesome-report-generator :
install mochawesome-report-generator --save-dev
Inputkan Script Konfigurasi ke cypress.json
{
…
“reporter”: “cypress-multi-reporter”,
“reporterOptions”: {
“reporterEnabled: “cypress/reports/mocha”,
“mochawesomeReporterOptions”: {
“reportDir”: “cypress/reports/mocha”,
“quite”:true,
“overwrite”: false,
“html”: false,
“Json”: true
},
"videosFolder": "integration-reports/integration/public/videos",
"screenshotsFolder": "integration-reports/integration/public/screenshots",
"videoCompression": false,
"browser": "chrome",
"chromeWebSecurity": false
}
}
Pada file package.json inputkan konfigurasi
Steps :
-
Buat script untuk combine report dan generate report (combine & generate report)
-
Lalu kita gabungkan scriptnya dengan membuat script baru dengan menggabungkan menggunakan tanda && ampersand (posttest)
-
Kemudian kita membuat clean report dan pretest script untuk membersihkan report yang sudah ada dan membuat report yang baru
-
Apabila test script yang kita jalankan gagal, pasti otomatis terhenti dan otomatis si posttestnya tidak akan berjalan maka kita membuat script lagi untuk menjalankan npm run scripts || npm run posttest
Windows
{
"scripts": {
"clean:reports": "rmdir /S /Q cypress\\report && 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",
"test" : "npm run scripts || npm run posttest"
}
}
Linux or Mac
{
"scripts": {
"clean:reports": "rm -R -f 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",
"test": "npm run scripts || npm run posttest"
}
}
lalu jalankan commad dengan npm run test, secara otomatis nanti akan melakukan generate folder berdasarkan yang sudah kita configurasikan di file cypress.json
Pada cypress disediakan features untuk melakukan API testing, yaitu dengan menggunakan commadn cy.request( )
Syntax :
cy.request(url)
cy.request(url, body)
cy.request(method, url)
cy.request(method, url, body)
cy.request(options)
Untuk mockup API akan menggunakan jsonplaceholder
Berikut adalah cara penerapan API Testing menggunakan Cypress :
describe('API Testing with Cypress', () => {
var result
//Testing Header
it('Validate the header', () => {
result = cy.request('https://jsonplaceholder.typicode.com/posts')
result.its('headers')
.its('content-type')
.should('include', 'application/json')
})
//Testing Status
it('Validate the status', () => {
result = cy.request('https://jsonplaceholder.typicode.com/posts')
result.its('status')
.should('equal',200);
})
//Testing Body
it('Validate the body ', () => {
result = cy.request('https://jsonplaceholder.typicode.com/posts/1')
result.its('body')
result.should((response) => {
expect(response).to.have.property('title')
expect(response).to.have.property('body')
})
})
})