Cypress E2E Testing

Apa itu E2E Testing?
Pengujian End to End (umumnya dikenal sebagai E2E) adalah jenis metode pengujian di mana aplikasi diuji dari awal hingga akhir alur pengujian. Alur ini telah ditentukan sebelumnya sesuai dengan fungsi/kondisi yang akan diperiksa untuk keberhasilan menjalankan aplikasi itu. Biasanya aliran End to End didasarkan pada interaksi user dan bagaimana mereka melakukan berbagai tindakan pada aplikasi.

Contohnya
Misal E2E pada aplikasi ecommerce

• Pendaftaran aplikasi -> Cari produk -> Checkout
• Login aplikasi -> Cari produk -> Wishlist
• Login aplikasi -> Cari produk -> Tambah ke keranjang -> Checkout -> Bayar

Case Study
Automate pada saucedemo web

Pertama kita konfigurasi dahulu pada file cypress.config.js

const { defineConfig } = require('cypress')

module.exports = defineConfig({

    e2e: {

        baseUrl : 'https://www.saucedemo.com',

        specPattern : "cypress/support/e2e",

        supportFile : false,

    },
 env:{

        username : "standard_user",

        password : "secret_sauce"

    }
})

• Membuka halaman URL

describe('My First Test', () => {

    it('Visits the Sauce labs', () => {

      cy.visit('https://www.saucedemo.com')

    })

  })

• Mencari kata kunci dalam page
  ketika tampilan website akan tampil seperti tulisan login, maka dalam auto perlu menentukan apakah url berhasil menampilkan apa yang seharusnya dengan cara mengecek element kata kunci seperti login

 cy.contains("LOGIN")

• click pada sebuah element
  Setelah dapat element, kita lakukan perintah klik jika element tersebut bisa digunakan.

 cy.contains("LOGIN").click()

• Buat sebuah assert
  setelah membuka halaman baru, maka kita bisa pastikan url nya dengan url yang diharapkan.

 cy.url().should('include', '/inventory.html')

• Menginput data pada form
  Jika program di atas dijalankan, maka akan mendapatkan respon Epic sadface: Username is required karena field form Username dan Password belum terisi. Oleh karena itu, diperlukan metode atau perintah untuk mengisi formulir di Homepage URL dengan menggunakan perintah

describe('E2E Login to inventory', () => {

    it('input valid username dan password then Login', () => {

      cy.visit('https://www.saucedemo.com')

 

      cy.get('#user-name').type("standard_user")

      cy.get('#password').type("secret_sauce")

      cy.contains("LOGIN").click()

 

      // Should be on a new URL which

      // includes '/inventory.html'

      cy.url().should('include', '/inventory.html')

    })

  })

Test scenario nya seperti ini

• Visit: https://example.cypress.io
• Find the element with content: type
• Click on it
• Get the URL
• Assert it includes: /commands/actions
• Get the input with the action-email class
• Type fake@email.com into the input
• Assert the input reflects the new value

Versi gherkin syntax

• Given a user visits https://example.cypress.io
• When they click the link labeled type
• And they type “fake@email.com” into the .action-email input
• Then the URL should include /commands/actions
• And the .action-email input has “fake@email.com” as its value