TestCafe: Ujian Aplikasi Web End-to-End yang lebih mudah dengan Node.js

testcafe: rangka kerja node.js untuk memudahkan ujian automatik aplikasi web

mata teras:

TestCafe adalah rangka kerja ujian aplikasi web berdasarkan node.js, yang memudahkan persediaan dan proses menjalankan ujian automatik. Ia meliputi semua fasa ujian, termasuk memulakan penyemak imbas, menjalankan ujian, mengumpul hasil, dan menghasilkan laporan.
TestCafe tidak memerlukan plugin penyemak imbas atau kebergantungan lain dan menyokong ujian di mana -mana desktop moden atau penyemak imbas mudah alih yang popular. Ia juga serasi dengan perkhidmatan ujian awan dan pelayar yang tidak konvensional melalui ekosistem plugin.
TestCafe menawarkan pelbagai operasi ujian, dari hover untuk memfailkan muat naik, dan mempunyai mekanisme menunggu automatik terbina dalam tanpa menambahkan menunggu atau hibernasi secara manual. Ia juga menyokong corak objek halaman, yang memperkenalkan perwakilan objek halaman yang diuji dan menggunakannya dalam kod ujian.
TestCafe boleh diintegrasikan dengan pelari tugas yang popular dan sistem integrasi berterusan, menjadikannya alat yang sama untuk tugas rutin dan menubuhkan ujian projek dalam aliran kerja pembangunan automatik. Ia juga boleh menjalankan ujian secara serentak merentasi pelbagai pelayar, mempercepatkan proses ujian.

Artikel ini dijelaskan oleh Vasily Strlyaev, ahli pasukan TestCafe, untuk menjelaskan kelebihan rangka kerja ujian aplikasi Node.js yang baru ini.

pemaju web front-end tahu betapa sukarnya untuk menetapkan ujian automatik untuk aplikasi web. Malah memasang rangka kerja ujian boleh mencabar. Banyak penyelesaian yang sedia ada memerlukan selenium, yang dilengkapi dengan plugin penyemak imbas dan JDK. anda juga perlu menyediakan persekitaran ujian sebelum memulakan ujian, yang bermaksud memproses fail konfigurasi. Kemudian, anda mungkin mendapati bahawa beberapa bahagian persekitaran ujian (seperti laporan) hilang, dan anda perlu mencari dan memasangnya secara berasingan.

TestCafe adalah rangka kerja ujian akhir-ke-akhir yang berasaskan node.js untuk aplikasi web.

Ia bertanggungjawab untuk semua fasa ujian: Memulakan penyemak imbas, menjalankan ujian, mengumpul hasil ujian dan menghasilkan laporan. Ia tidak memerlukan plugin penyemak imbas atau kebergantungan lain: ia berfungsi dari kotak.

Dalam artikel ini, saya akan menunjukkan bagaimana:

menulis ujian pertama anda

Jalankannya di Mesin Tempatan dan Perkhidmatan Ujian Awan

• Buat tugas ujian untuk pelari tugas
Memasang testcafe
Pertama, anda perlu memasang Node.js pada mesin anda. Jika anda tidak mempunyai satu, lawati laman web mereka dan muat turunnya, atau pertimbangkan untuk menggunakan pengurus versi (mis. NVM).

Setelah menyelesaikan node.js, memasang TestCafe hanya memerlukan satu arahan:

Jika anda menggunakan Linux/Mac dan mendapati diri anda perlu menambah sudo, anda harus mempertimbangkan untuk menetapkan kebenaran NPM.

Menulis Ujian

npm install -g testcafe

Kami akan menulis ujian untuk halaman demo TestCafe.

Buka editor kod pilihan anda dan buat fail test.js baru.

Pertama, tambahkan pernyataan perlawanan yang menunjuk ke http://devexpress.github.io/testcafe/example/demo webpage:

npm install -g testcafe

Kemudian, tambahkan ujian:

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

Sekarang biarkan ujian kami masukkan teks ke dalam medan input "Nama Pemaju" dan klik butang "Hantar":

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // 我们稍后将添加测试代码
});

di sini kami menggunakan typetext dan klik operasi ujian. TestCafe menyediakan banyak operasi sedemikian, dari melayang ke fail muat naik.

mari kita kembali ke ujian kami. Butang hantar akan mengalihkan anda ke halaman yang mengatakan "Terima kasih, %nama pengguna %!".

kami akan menyemak sama ada teks di halaman ini mengandungi nama yang betul:

Untuk melakukan ini, kami membuat pemilih untuk mengenal pasti tajuk artikel. Selepas operasi ujian, kami menambah pernyataan untuk memeriksa sama ada teks itu berkata "Terima kasih, Peter Parker!"

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button');
});

Objek halaman

Pasukan TestCafe menggalakkan penggunaan corak objek halaman dalam ujian. Dengan corak ini, anda boleh memperkenalkan perwakilan objek halaman yang diuji dan menggunakannya dalam kod ujian anda. Mari lihat bagaimana kita melakukan ini.

Buat fail halaman-object.js baru dan mengisytiharkan kelas halaman:

Setakat ini, ujian kami berinteraksi dengan tiga elemen halaman: Input nama pemaju, butang penyerahan, dan tajuk "Terima Kasih". Oleh itu, kami menambah tiga pemilih ke kelas halaman:

import { Selector } from 'testcafe';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const articleHeader = Selector('#article-header');

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button')
        .expect(articleHeader.innerText).eql('Thank you, Peter Parker!');
});

Dalam fail ujian, rujuk halaman-object.js, buat contoh kelas halaman, dan gunakan bidangnya dalam operasi ujian:

export default class Page {
    constructor () {
    }
}

Gunakan mod objek halaman, anda boleh menyimpan semua pemilih di satu lokasi. Apabila laman web di bawah perubahan ujian, anda hanya perlu mengemas kini satu fail - halaman -object.js.

import { Selector } from 'testcafe';

export default class Page {
    constructor () {
        this.nameInput     = Selector('#developer-name');
        this.submitButton  = Selector('#submit-button');
        this.articleHeader = Selector('#article-header');
    }
}

menjalankan ujian tempatan

Untuk menjalankan ujian ini pada mesin tempatan, anda hanya memerlukan satu arahan:

TestCafe secara automatik akan mencari dan melancarkan Google Chrome dan menjalankan ujian.

import Page from './page-object';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const page = new Page();

test('My first test', async t => {
    await t
        .typeText(page.nameInput, 'Peter Parker')
        .click(page.submitButton)
        .expect(page.articleHeader.innerText).eql('Thank you, Peter Parker!');
});

Begitu juga, anda boleh menjalankan ujian ini di Safari atau Firefox dengan hanya menyatakan namanya.

anda boleh menggunakan arahan testcafe-list-browsers untuk melihat senarai penyemak imbas yang dikesan oleh TestCafe pada mesin anda:

Laporan Operasi Ujian

Selepas ujian selesai, testCafe mengeluarkan laporan ke konsol:

Jika ujian gagal, TestCafe akan menyediakan tapak panggilan dengan timbunan panggilan yang menunjukkan di mana ralat berlaku:

Anda boleh memilih dari lima format laporan terbina dalam, atau mencari tambahan yang menyokong format yang berbeza.

Mulakan ujian dari IDE

anda boleh menjalankan ujian testcafe dari ides popular seperti kod vs atau sublimetext menggunakan plugin khusus:

menjalankan ujian dalam perkhidmatan ujian awan

Walaupun TestCafe boleh menjalankan ujian keluar dari kotak di mana-mana desktop moden atau pelayar mudah alih yang popular, ia juga mempunyai ekosistem pemalam yang serasi dengan perkhidmatan ujian awan, pelayar tanpa kepala, dan pelayar yang tidak konvensional.

Dalam bahagian ini, kami akan menjalankan ujian pada Saucelabs, awan ujian automatik yang popular. Ia menjadi tuan rumah beratus -ratus mesin maya dengan sistem operasi dan pelayar yang berbeza.

Untuk menjalankan ujian pada Saucelabs, anda memerlukan akaun Saucelabs. Jika anda tidak mempunyai satu, lawati https://saucelabs.com/ dan buat akaun baru. Anda akan mendapat kelayakan yang diperlukan: nama pengguna dan kunci akses.

Sekarang, anda perlu memasang plugin TestCafe yang serasi dengan Saucelabs:

Oleh kerana plugin ini dipasang di direktori tempatan, anda juga perlu memasang testcafe secara tempatan:

npm install -g testcafe

Sebelum menggunakan plugin Saucelabs, sila ikuti arahan dalam dokumentasi Saucelabs untuk menyimpan nama pengguna dan kunci akses kepada pembolehubah persekitaran Sauce_USERNAME dan SAUCE_ACCESS_KEY.

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

Anda kini boleh menjalankan ujian anda pada mesin maya Saucelabs di awan:

anda boleh melihat senarai lengkap penyemak imbas dan mesin maya yang ada di Saucelabs dengan menjalankan arahan berikut:

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // 我们稍后将添加测试代码
});

Tambah tugas ke pelari tugas

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button');
});

Pelari tugas berguna apabila anda perlu mengautomasikan tugas rutin dalam aliran kerja pembangunan anda.

Integrasi dengan pelari tugas adalah penyelesaian yang baik untuk menjalankan ujian TestCafe pada masa pembangunan. Itulah sebabnya komuniti TestCafe telah membangunkan plugin yang mengintegrasikannya dengan pelari tugas Node.js yang paling popular.

Dalam tutorial ini, kami akan menggunakan Gulp.Js.

Jika anda tidak mempunyai gulp.js yang dipasang pada mesin anda, pasangkannya secara global dan tempatan ke dalam projek anda menggunakan arahan berikut:

Pasang plugin Gulp yang mengintegrasikan testcafe dengan gulp.js:

import { Selector } from 'testcafe';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const articleHeader = Selector('#article-header');

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button')
        .expect(articleHeader.innerText).eql('Thank you, Peter Parker!');
});

Jika anda mempunyai fail gulpfile.js dalam projek anda, tambahkan tugas berikut kepadanya. Jika tidak, gunakan tugas ini untuk membuat gulpfile.js baru:

export default class Page {
    constructor () {
    }
}

Tugas ini menjalankan ujian dalam fail test.js di Chrome dan Firefox. Untuk mengetahui lebih lanjut mengenai API Plugin Gulp, lihat halaman GitHubnya.

import { Selector } from 'testcafe';

export default class Page {
    constructor () {
        this.nameInput     = Selector('#developer-name');
        this.submitButton  = Selector('#submit-button');
        this.articleHeader = Selector('#article-header');
    }
}

Anda kini boleh menjalankan tugas ini dari baris arahan seperti berikut:

ujian pada platform integrasi berterusan

import Page from './page-object';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const page = new Page();

test('My first test', async t => {
    await t
        .typeText(page.nameInput, 'Peter Parker')
        .click(page.submitButton)
        .expect(page.articleHeader.innerText).eql('Thank you, Peter Parker!');
});

TestCafe menyediakan baris arahan dan antara muka pengaturcaraan yang kuat, menjadikannya mudah digunakan dengan sistem CI yang paling moden.

Laporan ujian ujian boleh diberikan dalam format JSON, XUNIT, dan NUNIT yang difahami oleh sistem CI yang paling popular.

Dokumentasi TestCafe mengandungi resipi yang menerangkan bagaimana untuk menyediakan ujian untuk projek GitHub pada Travis CI.

Ringkasan

Dalam artikel ini, saya menunjukkan bagaimana untuk memulakan dengan ujian testcafe pertama anda dan akhirnya mengintegrasikan ujian E2E ke dalam proses projek anda. Anda boleh mengalami sendiri betapa mudahnya untuk menguji aplikasi web dengan TestCafe.

Jika anda mempunyai sebarang soalan mengenai TestCafe, sila komen di bawah, tanya soalan di forum atau lawati halaman GitHub.

TestCafe FAQ

Bagaimana testcafe berbeza dari alat ujian akhir-ke-akhir yang lain?

TestCafe adalah alat ujian akhir-ke-akhir yang unik kerana ia tidak memerlukan webdriver atau perisian ujian lain. Ia berjalan pada node.js dan menggunakan proksi untuk menyuntik skrip ke dalam penyemak imbas. Ini membolehkan ia mengautomasikan tindakan pengguna dan menegaskan bahawa unsur -unsur di halaman dijalankan seperti yang diharapkan. Ia menyokong ujian pada pelbagai pelayar dan platform, termasuk peranti mudah alih. Ia juga menyediakan ciri-ciri seperti menunggu automatik, diagnosis masa nyata dan pelaksanaan ujian serentak.

Bolehkah saya menggunakan TestCafe untuk ujian mudah alih?

Ya, TestCafe menyokong ujian mudah alih. Ia boleh menjalankan ujian pada peranti iOS dan Android serta emulator mudah alih dan emulator. Anda juga boleh mensimulasikan peranti mudah alih di pelayar desktop anda. Ini menjadikannya alat sejagat untuk menguji aplikasi web responsif.

Bagaimana TestCafe Mengendalikan Operasi Asynchronous?

TestCafe mempunyai mekanisme menunggu automatik terbina dalam. Ini bermakna anda tidak perlu menambah tunggu atau hibernasi secara manual ke ujian anda. TestCafe secara automatik menunggu pemuatan halaman dan XHR sebelum dan selepas setiap operasi. Ia juga menunggu elemen dapat dilihat sebelum berinteraksi dengannya.

Bolehkah saya menjalankan ujian TestCafe dalam pelbagai pelayar pada masa yang sama?

Ya, TestCafe membolehkan anda menjalankan ujian dalam pelbagai pelayar pada masa yang sama. Ini boleh mempercepatkan proses ujian anda. Anda boleh menentukan bilangan ujian serentak semasa memulakan ujian.

Bagaimana untuk menguji ujian dalam testcafe?

TestCafe menyediakan beberapa kaedah untuk debugging dan ujian. Ia termasuk mod debug yang menjeda ujian dan membolehkan anda melihat status halaman yang diuji pada masa ini. Ia juga menyediakan laporan status ujian masa nyata, tangkapan skrin dan rakaman video sesi ujian.

Bolehkah saya menggunakan TestCafe untuk ujian silang pelayar?

Ya, TestCAFE menyokong ujian silang pelayar. Ia boleh menjalankan ujian secara serentak dalam pelbagai pelayar, sama ada pada mesin tempatan atau pada peranti jauh. Ia menyokong semua pelayar popular termasuk Chrome, Firefox, Safari, dan Internet Explorer.

Bagaimana testCafe Handle Page Navigation?

TestCafe secara automatik mengendalikan navigasi halaman. Ia menunggu halaman dimuat sebelum ujian bermula dan selepas setiap tindakan yang menyebabkan halaman baru. Ini bermakna anda tidak perlu menambah sebarang kod khas untuk mengendalikan navigasi halaman.

Bolehkah saya menggunakan TestCafe dengan sistem integrasi yang berterusan?

Ya, TestCafe boleh diintegrasikan dengan sistem integrasi berterusan yang popular seperti Jenkins, TeamCity, Travis, dll. Ia boleh menghasilkan laporan dalam pelbagai format, termasuk Xunit, yang boleh digunakan oleh sistem ini.

Bagaimana untuk mengendalikan muat naik fail di testcafe?

TestCafe menyediakan operasi khas untuk muat naik fail. Anda boleh menggunakan operasi T.SetFileStoupload untuk memuat naik fail. Operasi ini mengambil pemilih yang mengenal pasti input fail dan rentetan yang menentukan laluan untuk memuat naik fail.

Bolehkah saya menggunakan TestCafe untuk ujian prestasi?

Walaupun TestCafe digunakan terutamanya untuk ujian berfungsi, ia juga boleh digunakan untuk ujian prestasi. Anda boleh menggunakannya untuk mengukur masa yang diperlukan untuk operasi menyelesaikan, memuatkan halaman, dan permintaan Ajax untuk diselesaikan. Walau bagaimanapun, untuk ujian prestasi yang lebih terperinci, anda mungkin perlu menggunakan alat ujian prestasi khusus.

Output yang disemak semula ini mengekalkan lokasi dan format imej asal sambil memupuk kandungan untuk keasliannya.

Atas ialah kandungan terperinci TestCafe: Ujian Aplikasi Web End-to-End yang lebih mudah dengan Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!