Blog ini, akan membuat Anda memahami cara mengimplementasikan pengujian e2e menggunakan Cypress dan melakukan integrasi dan pengiriman berkelanjutan dengan CircleCI untuk pengujian Anda.

Tentang cemara

Cypress adalah alat pengujian front end generasi berikutnya, dibuat untuk aplikasi web modern. Cypress hadir sepenuhnya dengan fitur-fitur seperti:

— Perjalanan waktu

— Kemampuan debug

— Penantian otomatis

— Tangkapan Layar dan Video

— Pengujian lintas browser

Dan banyak lagi…

Cypress secara arsitektur berbeda. Tidak seperti kebanyakan alat, alat ini beroperasi dalam run loop yang sama dengan aplikasi Anda. Ini menyinkronkan dengan proses Node dan mengelola komunikasi, sinkronisasi, dan melakukan tugas atas nama satu sama lain.

Pengaturan Proyek

Mari mulai menyiapkan proyek dasar Cypress

— Buat folder dengan nama cypress-circleci dan inisialisasi proyek node Anda

$ mkdir cypress-circleci
$ npm init

- Instal cypress dengan perintah

npm install cypress --save

- Buka pohon cemara dari proyek Anda

npx cypress open

- Struktur folder akan terlihat seperti ini

circleci-cypress
│
└───fixtures
│ │ sampleData.json
│ │
└───integration
│ │ siteVerify.js
│
└───plugins
│ │ index.js
│
└───screenshots
│ │ img1.pmg
│
└───results
│ │ test
│
└───supports
│ │ commands.js
│ │ index.js
|
└───cypress.json
└───package.json

- Buat tes dasar untuk memverifikasi situs “https://dikshitashirodkar.com'. Dan Anda dapat mengonfigurasi url dasar situs Anda di dalam cypress.json

{
  "baseUrl": "https://dikshitashirodkar.com/",
  "video": false,
  "reporterOptions": {
    "mochaFile": "cypress/results/tests-[hash].xml",
    "toConsole": true
  }
}

Catatan: Secara default, cypress menyediakan rekaman video dari pengujian yang dijalankan, di sini kami secara jelas menonaktifkannya menggunakan tanda video. Dan menambahkan konfigurasi untuk laporan xml.

File pengujian di bawah ini menggunakan fixtures (digunakan untuk menyimpan dan mengelola data pengujian, yang tidak lain adalah file json).
File perlengkapan sederhana dengan nama sample.json

{
  "imageName": "dikshita",
  "heading": "QA Talking point"
}

Inilah tes dasar integration/test.js. Tes berisi:

1. Kunjungi situs

2. Verifikasi status respon situs menjadi 200

3. Verifikasi judul blog menjadi 'QA Talking point'

4. Verifikasikan ikon gambar blog menjadi 'dikshita'

describe("Verify the website", function() {
  before(function() {
    cy.visit("/")
  })
  beforeEach(function() {
    cy.fixture("sample").then(function(sample) {
      this.sample = sample
    })
  })
  it("verify the status of the site", function() {
    cy.request("/about").should(function(response) {
      expect(response.status).to.eq(200)
    })
  })
  it("verify the heading of the blog", function() {
    cy.get(".head-logo")
      .children("a")
      .should("have.text", this.sample.heading)
  })
  it("verfiy the image icon on the site", function() {
    console.log(this.sample, "printing data")
    cy.get(".profile-img")
      .should("have.attr", "src")
      .and("include", this.sample.imageName)
  })
})

Mari jalankan tes menggunakan perintah:

npm run cypress run --browser chrome

Output dari hasilnya akan seperti ini:

Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  tests/verifySite.js                      00:08        3        3        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                        00:08        3        3        -        -        -

Ini dia, Anda telah berhasil mengkonfigurasi dan mengeksekusi…🏅

Jalankan cemara dengan CircleCI

CircleCI adalah alat integrasi dan penerapan berkelanjutan, yang membantu tim mengintegrasikan kode mereka ke dalam repositori dan membuat pengujian, “n” tidak sebanyak kali dalam sehari. CircleCI menggunakan Orbs yang merupakan paket elemen konfigurasi sumber terbuka dan dapat dibagikan yang dapat digunakan kembali, yang mencakup pekerjaan, perintah, dan pelaksana.
CircleCI juga menyediakan Orb untuk pengujian cypress tanpa menghabiskan waktu mengonfigurasi CircleCI. Itu juga mencatat hasil & menyediakan GUI.

Mari beralih ke mengonfigurasi CircleCI

- Buat folder .circleci di direktori root proyek Anda
- Tambahkan file di dalam folder .circleci sebagai config.yml

version: 2.1
orbs:
  cypress: cypress-io/cypress@1
executors:
  with-chrome:
    resource_class: small
    docker:
      - image: "cypress/browsers:node14.16.0-chrome90-ff88"
workflows:
  build:
    jobs:
      - cypress/install
      - cypress/run:
          requires:
            - cypress/install
          executor: with-chrome
          browser: chrome
          post-steps:
            - run: ls
            - store_test_results:
                path: cypress/results
            - store_artifacts:
                path: cypress/screenshots

Catatan: Tempatkan proyek cypress Anda ke dalam sistem yang dikontrol versi (github atau bitbucket). Dalam kasus kami, kami akan menempatkannya di github.

Siapkan akun CircleCI Anda

1. Anda dapat masuk ke portal CircleCI melalui gitHub dan Anda akan memiliki akses ke semua repositori github Anda di layar daftar Proyek.

2. Untuk menyiapkan lingkaran untuk proyek git hub Anda, pilih Setup project. Ini kemudian akan meminta Anda untuk memilih cabang tempat Anda ingin menjalankan pengujian dan cabang tersebut harus berisi folder config.yml di dalam .circleci. Atau pilihan lain adalah membuat file konfigurasi baru.

Catatan:
Untuk postingan blog ini, kami memicu pipeline secara manual. Namun Anda pasti bisa, mengotomatiskan proses pemicu saluran pipa.

3. Saat Anda menyiapkan proyek, alur akan terpicu secara otomatis dan kemajuan pembangunan dapat dilihat

4. Keberhasilan jalur pipa akan terlihat seperti:

5. Saluran pipa yang gagal akan terlihat seperti ini

6. Kami telah menambahkan konfigurasi untuk menyimpan hasil pengujian & artefak di file config.yml kami. Oleh karena itu, kami juga dapat melihat detail pengujian yang gagal, di bagian pengujian dan tautan tangkapan layar pengujian di bagian artefak

Itu saja untuk blog ini. Semoga Anda menikmatinya. Terima kasih sudah membaca…!