Konfigurasikan Tes Cypress untuk Dijalankan di Berbagai Lingkungan

Salah satu skenario paling umum dalam kerangka otomatisasi adalah menjalankan skrip pada lingkungan yang berbeda seperti QA, staging, produksi, dll. Ada beberapa cara untuk mengonfigurasi kerangka kerja Cypress Anda agar berjalan di lingkungan yang berbeda. Saya akan menunjukkan tiga metode yang paling sering digunakan

Dalam artikel ini, saya telah menjelaskan 3 metode berbeda untuk menjalankan tes Cypress Anda di berbagai lingkungan.

Artikel ini menjelaskan tiga pendekatan berbeda untuk menjalankan pengujian otomatisasi Cypress di lingkungan yang berbeda. Di bawah ini adalah 3 metode yang berbeda.

  1. Konfigurasikan Cypress untuk Berjalan di Lingkungan yang Berbeda Different menggunakan baseUrl di cypress.json.
  2. Siapkan beberapa Lingkungan di Cypress oleh Membuat file konfigurasi Cypress terpisah untuk setiap lingkungan.
  3. Jalankan tes Cypress Anda di berbagai lingkungan dengan Kelas Variabel Lingkungan Cypress dan Utilitas Kustom.

Metode 1. Mengonfigurasi Cypress Agar Berjalan Di Lingkungan Berbeda Menggunakan baseUrl di cypress.json

Langkah 1: Navigasikan ke Itu cypress.json File Terletak di Folder Proyek Anda

Navigasikan ke Folder Akar Proyek dan mencari cypress.json. cypress.json adalah file konfigurasi untuk kerangka otomatisasi Cypress Anda.

Langkah2: Buka cypress.json File dan Tambahkan Cypress baseUrl

Buka file cypress.json Anda, tambahkan baseUrl pilihan. Di bawah ini adalah contohnya:

"baseUrl":"https://www.qa-website.com",

Menambahkan Cypress baseUrl

Langkah 3: Akses baseURL di Spesifikasi Anda

Dalam penggunaan file spesifikasi Cypress.config().baseUrl; perintah untuk mengakses kode contoh baseUrl

//my.spec.ts
//Accessing baseUrl value from cypress.json
describe('Example of BaseUrl', () => {
    it('Example of Baseurl', () => {
        let url = Cypress.config().baseUrl; //accesing baseUrl
        cy.visit(url); //passing url value to cy.visit()
    });
});

Akses baseURL di Spesifikasi Anda

Langkah 4: Gunakan Baris Perintah Cypress (alias Cypress CLI) untuk Melewati baseUrl Secara Dinamis

Kami memecahkan masalah baseURL, tetapi selalu statis. Sekarang kita perlu memikirkan untuk menjalankan pengujian Cypress pada lingkungan yang berbeda seperti staging, produksi, dll. Untuk mencapai ini, kita perlu mengganti baseURL menggunakan opsi baris perintah Cypress seperti di bawah ini.

Jalankan tes Cypress Anda di a pementasan lingkungan, meneruskan URL lingkungan pementasan:

npx cypress run --config baseUrl="https://www.staging-website.com/"

Jalankan tes Cypress Anda di a produksi lingkungan, meneruskan URL lingkungan produksi:

npx cypress run --config baseUrl="https://www.production-website.com/"

catatan:

1. Perintah di atas harus dijalankan di baris perintah Cypress alias Cypress CLI.

2. Tes langsung dijalankan menggunakan baris perintah dan Anda tidak akan melihat jendela Cypress. Hasil akan ditampilkan pada baris perintah.

Apa yang terjadi ketika Anda melewati baseUrl di baris perintah Cypress?

  • Saat Anda menjalankan Cypress dengan perintah di atas (dengan opsi baseURL), baserUrlnilai di dalam cypress.json akan diabaikan (atau ditimpa).
  • Nilai yang ditentukan untuk baseUrl di baris perintah Cypress mengambil prioritas dan hal yang sama akan dianggap sebagai baseUrl oleh Cypress.

Dengan pendekatan di atas, kami dapat menjalankan pengujian Cypress kami terhadap beberapa lingkungan dengan mengonfigurasi baseURL dalam kerangka kerja Otomatisasi Pengujian Cypress kami. Tapi kita perlu menentukan URL setiap kali kita menjalankan pengujian kita.

Metode 2: Siapkan Beberapa Lingkungan di Cypress WFile Konfigurasi Cypress Terpisah untuk Setiap Lingkungan

Metode 1 menggunakan pendekatan Cypress baseURL. Jika Anda tidak menyukai pendekatan pertama maka pendekatan kedua adalah mengatur beberapa file konfigurasi Cypress untuk menjalankan tes Cypress Anda di lingkungan yang berbeda. Mari kita lihat bagaimana melakukannya.

Langkah 1: Buat File Konfigurasi Cypress Anda Sendiri di Folder Root (Ekstensi Seharusnya .json)

Mari kita pertimbangkan skenario yang ingin kita jalankan pengujian Cypress pada lingkungan staging dan lingkungan produksi, maka kita perlu membuat dua file konfigurasi Cypress untuk menjalankan pengujian Cypress di setiap lingkungan yaitu staging-config.json, production-config.json

Arahkan ke Root dari Folder proyek buat dua file konfigurasi Cypress dengan ekstensi .json, Itu adalah staging-config.jsondan production-config.json.

production-config dan staging-config Di dalam Folder Proyek

Langkah 2: Ubah pengaturan Cypress baseUrl di file konfigurasi Cypress yang baru dibuat

Kami telah membuat dua file konfigurasi Cypress yaitu staging-config.json dan production-config.json. Itu staging-config.json harus mengandung baseUrl menunjuk ke pementasan situs web dan produksi-config.json harus mengandung baseUrl menunjuk ke produksi situs web.

Paling penting kita hanya perlu perubahan baseUrl dalam file konfigurasi Cypress yang baru dibuat, konfigurasi yang tersisa masih dapat kita gunakan sama seperti default cemara.json berkas konfigurasi. Dengan cara lain, kita dapat mewarisi semua pengaturan dari cemara.json kecuali dasarUrl.

Jadi, untuk mengganti pengaturan Cypress baseUrl default di staging-config.json kita perlu menambahkan kode seperti di bawah ini:

{
  "extends": "./cypress.json",
  "baseUrl": "https://www.staging-website.com"
}

Di bawah ini adalah contoh caranya staging-config.json terlihat:

pementasan-config.json Contoh

Untuk mengganti pengaturan Cypress baseUrl default di produksi-config.json kita perlu menambahkan kode seperti di bawah ini:

{
  "extends": "./cypress.json",
  "baseUrl": "https://www.production-website.com"
}

Di bawah ini adalah contoh caranya produksi-config.json terlihat:

production-config.json Contoh

catatan: Semua pengaturan lainnya dari cypress.json akan diwarisi ke production-config.json/staging-config.json  kecuali pengaturan yang ditentukan, dalam kasus kami, kami menentukan dasarUrl sehingga akan ditimpa. Jenis konsep pewarisan.

Langkah 3: Buat File Cypress Spec dan Gunakan Cypress.config().baseUrl Perintah untuk Mengakses baseURL.

Sekarang, Anda perlu membuat file spesifikasi Cypress dan mengakses baseUrl. Di dalam file spesifikasi Cypress Anda, Anda bisa menggunakan Cypress.config().baseUrl untuk mengakses baseUrl Cypress.

//my.spec.ts
describe('Example of BaseUrl', () => {
    it('Example of Baseurl', () => {
        let url = Cypress.config().baseUrl;
        cy.visit(url);
    });
});

Contoh File Skrip Cypress:

Contoh File Skrip Cypress

Langkah 4: Jalankan Tes Cypress Anda di Berbagai Lingkungan Menggunakan Baris Perintah Cypress alias Cypress CLI

Kami memiliki file konfigurasi Cypress siap dan kami memiliki file spesifikasi Cypress, sekarang kami perlu menjalankan spesifikasi kami dengan menentukan Cypress --config-file pilihan di baris perintah.

Jalankan spesifikasi Cypress Anda di a pementasan lingkungan dengan perintah di bawah ini:

npx cypress run --config-file staging-config.json

Jalankan spesifikasi Cypress Anda di a produksi lingkungan dengan perintah di bawah ini:

npx cypress run --config-file production-config.json

Dengan cara ini, menggunakan Metode 2 Anda dapat menjalankan tes Cypress di beberapa lingkungan yang memiliki file konfigurasi Cypress terpisah untuk setiap lingkungan.

Namun, itu tidak terasa seperti pendekatan yang paling bersih, meneruskan Cypress baseURL dari baris perintah dan memiliki beberapa file konfigurasi Cypress untuk menjalankan tes pada lingkungan yang berbeda mungkin rumit untuk mengelola kerangka kerja atau Anda mungkin tidak menyukai pendekatan ini karena alasan tertentu tetapi ada cara lain untuk melakukan ini.

Metode 3: Jalankan Tes Cypress Anda di Berbagai Lingkungan Dengan Variabel Lingkungan Cypress dan Kelas Utilitas Kustom

Jika dua pendekatan di atas tidak berhasil untuk Anda, inilah pendekatan yang paling bersih. Ini adalah pendekatan sederhana dan mudah yang membantu Anda mengelola kerangka kerja Cypress Anda dengan cara yang rapi.

Di sini, Anda akan membuat kelas Utilitas yang akan menampung URL lingkungan yang berbeda, setelah Anda membuat kelas Utilitas, Anda dapat mengimpor dan menggunakannya sesuai kebutuhan Anda. Mari kita lihat bagaimana melakukannya.

Langkah 1: Buat File Utilitas

Membuat kamutility.ts file di proyek Anda, Anda dapat membuat lokasi apa pun jika Anda mau, tetapi saya sarankan menciptakan Cypress ini utilitas file di Anda cemara/dukungan map.

Dari Folder proyek Akar > Navigasikan ke cemara folder > buka dukung map.

Membuat baru File TypeScript (atau Anda juga dapat membuat file Javascript) dengan nama utility.ts.

Di bawah ini adalah contoh dari utilitas.ts mengajukan

Membuat File Utilitas

Langkah 2: Tambahkan Kode ke URL Pengembalian Berdasarkan Nilai Variabel Lingkungan Cypress

Nilai Variabel Lingkungan Cypress akan diteruskan dari baris perintah (dijelaskan di langkah selanjutnya). Di sini kita perlu mengembalikan URL berdasarkan nilai variabel lingkungan.

//utility.ts
export class Utility {
    getBaseUrl() {
        let envi = Cypress.env('ENV'); //Get the value of evnironment variable i.e ENV
        if (envi == 'production') //Check the value
            return "https://www.proudction-website.com"; //return desired url
        else if (envi == 'staging')
            return "https://staging-website.com";
        else if (envi == 'qa')
            return "http://qa-website.com";
    }
}

URL Pengembalian Berdasarkan Nilai Variabel Lingkungan Cypress

Perhatikan contoh di atas.

Kami telah menciptakan getBaseUrl() fungsi, yang akan mengembalikan satu URL berdasarkan Jenis lingkungan kami melewati baris perintah Cypress.

  • ENV: ENV adalah variabel lingkungan yang akan diteruskan dari baris perintah Cypress.
  • kondisi if-else: Dalam kondisi if kita memeriksa nilai variabel lingkungan yaitu nilai ENV,
  • let envi = Cypress.env('ENV'): Pada baris ini, kita menyimpan nilai variabel Cypress Environment ke variabel lokal yang disebut envi.
  • if (envi == 'production'): Pada baris ini, kami memeriksa apakah nilainya cocok dengan produksi string jika cocok, kami mengembalikan Url lingkungan produksi.

Demikian juga untuk lingkungan pementasan dan QA.

Langkah 3: Buat File Spec dan Gunakan URL Lingkungan

Kami telah membuat fungsi utilitas kami sendiri, yang akan mengembalikan URL khusus lingkungan. Sekarang, mari kita buat file spesifikasi Cypress.

Dalam file Spec, Anda dapat memanggil getBaseUrl() berfungsi dengan mengimpor Utility kelas seperti di bawah ini.

//my.spec.ts

//Import Utility from support folder
import { Utility } from "../../../support/utility"

//Call getBaseUrl() to get environment specific url value
const url = new Utility().getBaseUrl();

describe('Verify Environment Config' + url, () => {
    it('Verify Environment', () => {
        cy.visit(url); //use url variable
    });
});

catatan: Anda dapat membuat utilitas di mana pun Anda inginkan tetapi saat mengimpor memberikan jalur yang valid ke hal yang sama.

Mengimpor Kelas Utilitas

Langkah 4: Jalankan Tes Cypress di Baris Perintah dengan Menentukan Variabel Lingkungan Cypress

Bagian konfigurasi yang telah kita selesaikan, sekarang kita perlu menjalankan tes Cypress pada lingkungan yang berbeda dengan menentukan Variabel Lingkungan Cypress, untuk melakukan itu, kita dapat menggunakan perintah di bawah ini.

Jalankan tes Cypress Anda di produksi lingkungan menggunakan perintah di bawah ini:

npx cypress run  --env ENV="production"

Jalankan tes Cypress Anda di pementasan lingkungan menggunakan perintah di bawah ini:

npx cypress run  --env ENV="staging"

Kalau tidak, Anda dapat mengonfigurasi pintasan ke proyek Cypress Anda pacakge.json. Di bawah ini adalah contoh kode:

{
  "scripts": {
    "cy:run:prod":"cypress run  --env ENV=production"
     "cy:run:stg":"cypress run  --env ENV=staging"
  }
}

Jika Anda ingin menjalankan produksi cukup ketik baris perintah npm run cy:run:prod.

Kesimpulan

Jadi, saya telah menjelaskan tiga pendekatan berbeda untuk Menjalankan Tes Cypress di Berbagai Lingkungan, Setelah Anda menyiapkan ini di kerangka kerja otomatisasi Cypress, Anda dapat mengonfigurasi saluran pipa Cypress CI/CD untuk berjalan di lingkungan yang berbeda menggunakan salah satu pendekatan di atas. Semoga ini membantu.

*****

Dorong saya untuk menulis lebih banyak artikel, belikan kopi untuk saya.

Jika Anda mencari bantuan, dukungan, bimbingan, hubungi saya di LinkedIn|https://www.linkedin.com/in/ganeshsirsi