Installing Cypress

Cypress merupakan next generation front end testing tool berbasis JavaScript yang digunakan menguji aplikasi secara otomatis sesuai konfigurasi test yang dijalankan. Ini memudahkan developers dan QA engineers dalam melakukan test debug aplikasi dengan lebih cepat, mudah, dan lebih handal.

Installing Node.js

Cypress support Node.js 18.x atau yang lebih baru.

Untuk menginstall Node.js 18 gunakan perintah.

yum -y install https://rpm.nodesource.com/pub_18.x/nodistro/repo/nodesource-release-nodistro-1.noarch.rpm
yum -y --setopt=nodesource-nodejs.module_hotfixes=1 install nodejs

Cek versi Node.js

# node -v
v18.18.2

Selanjutnya install package dependensi Cypress sesuai OS yang Anda gunakan.

Ubuntu/Debian

apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2 libxtst6 xauth xvfb

CentOS

yum install -y xorg-x11-server-Xvfb gtk2-devel gtk3-devel libnotify-devel GConf2 nss libXScrnSaver alsa-lib

Installing Cypress

Install Cypress menggunakan npm

npm install cypress --save-dev

Buka Cypress untuk memulai dan membuat konfigurasi.

./node_modules/.bin/cypress open

Anda juga dapat menambahkan npm script di package.json untuk memudahkan eksekusi cypress

{
  "scripts": {
    "cypress:open": "cypress open"
    "cypress:run": "cypress run"
  }
}

Kemudian buka Cypress dari folder project dengan perintah.

npm run cypress:open

Tampilan Launchpad Cypress.

E2E Testing mengunjungi halaman dan melakukan pengujian pada keseluruhan aplikasi yang berjalan, sedangkan Component Testing melakukan pengujian pada masing-masing komponen aplikasi secara terpisah.

Pada panduan ini akan memilih E2E Testing

Setelah dipilih, konfigurasi untuk E2E Testing akan digenerate.

Klik Continue dan tentukan browser yang digunakan untuk pengujian. Misalnya Firefox.

Selain itu Anda juga bisa menginstall browser Chromium yang didukung Cypress melalui Chromium Downloads Tool

Writing Your First E2E Test

Untuk membuat file test, pilih Create new spec

Tentukan nama file spec atau biarkan default.

File spec akan digenerate seperti berikut.

Selanjutnya Anda dapat mencoba menjalankan file dengan klik Okay, run the spec atau close window untuk memulai memodifikasi spec.

Visit a page

Jika langkah diatas sudah dilakukan, selanjutnya Anda dapat memulai pengetesan aplikasi dengan mengedit file cypress/e2e/spec.cy.js pada direktori project.

describe('template spec', () => {
  it('passes', () => {
    cy.visit('https://bisacloud.my.id')
  })
})

Selanjutnya edit cypress.config.js dan konfigurasikan video untuk merekam pengujian yang dijalankan dengan cypress run

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    video: true,
  },
});

Jalankan pengujian dengan perintah.

npm run cypress:run

Jika pengujian berhasil, maka output video dapat Anda download juga di cypress/videos.

Query for an element

Untuk mencari element berdasarkan isinya, Anda dapat menggunakan cy.contains() seperti contoh berikut.

describe('My First Test', () => {
  it('finds the content "type"', () => {
    cy.visit('https://example.cypress.io')

    cy.contains('type')
  })
})

Click an element

Untuk mengklik link yang ditemukan, tambahkan perintah .click() seperti berikut.

describe('My First Test', () => {
  it('clicks the link "type"', () => {
    cy.visit('https://example.cypress.io')

    cy.contains('type').click()
  })
})

Make an assertion

Anda juga dapat menambahkan pernyataan pada halaman yang telah diklik, misalnya untuk memastikan URL pada halaman tersebut sesuai dengan URL yang diharapkan.

describe('My First Test', () => {
  it('clicking "type" navigates to a new url', () => {
    cy.visit('https://example.cypress.io')

    cy.contains('type').click()

    // Should be on a new URL which
    // includes '/commands/actions'
    cy.url().should('include', '/commands/actions')
  })
})

Untuk melihat contoh perintah lain bisa melalui Cypress.io: Kitchen Sink