Kokonaisvaltaisen testauksen työnkulut
Toteuttakaa kokonaisvaltaisia testaustrategioita Electron-työpöytäsovelluksen täydellisen käyttäjäpolun ja toiminnallisuuden varmistamiseksi.
Kokonaisvaltaisen testauksen työnkulut on ilmainen Electron-työpöytäsovellusten kehitys-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Electron-työpöytäsovellusten kehitys-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Electron-työpöytäsovellusten kehitys-kurssilla on yhteensä 4 oppituntia.
Mitä päästä päähän -testaus on
Päästä päähän -testaus (E2E) simuloi todellisia käyttäjätilanteita ja varmistaa, että sovellus toimii odotetulla tavalla alusta loppuun. Ajatelkaa sitä käyttäjän asemaan asettumisena!
Electron-sovellusten E2E-testit tarkistavat, että käyttöliittymä (HTML/CSS/JS) toimii oikein yhdessä taustalogiikan (Node.js) ja käyttöjärjestelmän natiivien ominaisuuksien kanssa.
Miksi Electron-sovelluksille tehdään E2E-testausta
Electron-sovellukset ovat monimutkaisia, koska niissä yhdistyvät verkkoteknologiat ja natiivin työpöydän ominaisuudet. Yksikkötestit tarkistavat pieniä osia, mutta E2E-testauksella varmistetaan kaiken toimivan yhdessä.
- Realistinen käyttäjäpolku: jäljittelee käyttäjän navigointia ja toimintoja
- Integraation tarkistukset: varmistaa pää- ja renderöintiprosessien välisen viestinnän
- Regressioiden havaitseminen: tunnistaa, rikkovatko uudet muutokset aiemmin toimineita ominaisuuksia
- Luottamus: antaa varmuuden sovelluksen vakaudesta
E2E-työkalun valitseminen
Verkkosovellusten E2E-testaukseen on useita työkaluja, ja monia niistä voi mukauttaa Electronille. Suosittuja vaihtoehtoja ovat:
- Playwright: Microsoftin moderni kehys, joka tunnetaan nopeudestaan ja luotettavuudestaan. Se tukee Electronia sisäänrakennetusti.
- Cypress: kehittäjäystävällinen työkalu, joka suorittaa testit suoraan selaimessa (tai Electronin renderöintiprosessissa).
- WebDriver (Selenium): perinteinen vaihtoehto, jonka määrittäminen erityisesti Electronille on kuitenkin usein monimutkaisempaa.
Keskitymme Playwrightiin sen vahvan Electron-tuen vuoksi.
Playwrightin määrittäminen Electronille
Ensin Playwright ja sen Electron-ajuri on asennettava projektiin. Avatkaa pääte Electron-sovelluksenne juurihakemistossa ja suorittakaa:
npm install --save-dev @playwright/test playwright-electron
Tämä komento lisää tarvittavat paketit kehitysriippuvuuksiinne. Muistakaa, että Playwright-testit suoritetaan yleensä erillisessä testikansiossa.
Esimerkkimme Electron-sovellus
Käytetään testaamiseen yksinkertaista Electron-sovellusta. Luokaa nämä tiedostot projektinne juureen:
package.json:
{ "name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^28.0.0"
}
}Esimerkkisovellus: pääprosessi ja käyttöliittymä
Luokaa seuraavaksi pääprosessin tiedosto ja käyttöliittymä:
main.js:
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow () {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: false,
contextIsolation: true
}
});
mainWindow.loadFile('index.html');
}
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});Esimerkkisovellus: HTML ja preload
Lopuksi yksinkertainen käyttöliittymämme ja tyhjä preload-skripti:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Electron App</title>
<style>
body { font-family: sans-serif; text-align: center; padding-top: 50px; }
h1 { color: #333; }
button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
</style>
</head>
<body>
<h1>Hello, CoddyKit!</h1>
<p id="message">Click the button below.</p>
<button id="myButton">Change Message</button>
<script>
document.getElementById('myButton').addEventListener('click', () => {
document.getElementById('message').textContent = 'Message Changed!';
});
</script>
</body>
</html>Ensimmäisen E2E-testin kirjoittaminen
Luokaa tests-kansioon tiedosto nimeltä e2e.spec.js. Tämä testi käynnistää Electron-sovelluksenne ja tarkistaa sen otsikon.
tests/e2e.spec.js:
const { test, expect, _electron: electron } = require('@playwright/test');
test('app launches and shows title', async () => {
// Launch the Electron app from the current directory
const electronApp = await electron.launch({ args: ['.'] });
// Get the first window that opens
const window = await electronApp.firstWindow();
// Assert the window title
expect(await window.title()).toBe('My Electron App');
// Close the app after the test
await electronApp.close();
});Toimintojen käsittely ja väitteet
Laajennetaan testiämme napsauttamaan painiketta ja tarkistamaan viestin muuttuminen. Tämä havainnollistaa käyttäjän toiminnan käsittelyä ja väitteiden tekemistä.
Lisätkää tiedostoon tests/e2e.spec.js:
const { test, expect, _electron: electron } = require('@playwright/test');
// ... (previous test)
test('button click changes message', async () => {
const electronApp = await electron.launch({ args: ['.'] });
const window = await electronApp.firstWindow();
// Locate the paragraph and button elements by their IDs
const messageParagraph = window.locator('#message');
const button = window.locator('#myButton');
// Wait for elements to be visible and check initial text
await messageParagraph.waitFor();
await expect(messageParagraph).toHaveText('Click the button below.');
// Click the button
await button.click();
// Assert that the text has changed
await expect(messageParagraph).toHaveText('Message Changed!');
await electronApp.close();
});E2E-työnkulun tarkistus
Mitkä seuraavista ovat Electron-sovelluksen päästä päähän (E2E) -testauksen keskeisiä hyötyjä?
Kertaus: E2E-työnkulut
Tässä oppitunnissa tutustuimme Electron-sovellusten päästä päähän (E2E) -testaukseen. Opimme, että E2E-testit simuloivat käyttäjän koko vuorovaikutusta varmistaakseen, että sovelluksen kaikki osat toimivat saumattomasti yhdessä.
- Tunnistimme Playwrightin tehokkaaksi Electronin E2E-testauksen työkaluksi.
- Määritimme yksinkertaisen Electron-sovelluksen ja kirjoitimme testit sen käynnistämiseen, käyttöliittymäelementtien kanssa vuorovaikuttamiseen ja väitteiden tekemiseen.
E2E-testaus on olennaista vankkojen ja luotettavien työpöytäsovellusten rakentamisessa!
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 12
- Oppitunnit
- 47
Usein kysytyt kysymykset
Onko oppitunti ”Kokonaisvaltaisen testauksen työnkulut” ilmainen?
Kyllä – oppitunnin ”Kokonaisvaltaisen testauksen työnkulut” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Electron-työpöytäsovellusten kehitys-kurssin, päivitä CoddyKit PROhon. Electron-työpöytäsovellusten kehitys-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Kokonaisvaltaisen testauksen työnkulut”?
Toteuttakaa kokonaisvaltaisia testaustrategioita Electron-työpöytäsovelluksen täydellisen käyttäjäpolun ja toiminnallisuuden varmistamiseksi. Harjoittelet Electron-työpöytäsovellusten kehitys-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Electron-työpöytäsovellusten kehitys-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Electron-työpöytäsovellusten kehitys-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Kokonaisvaltaisen testauksen työnkulut”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Electron-työpöytäsovellusten kehitys-oppitunnilla?
Kyllä. Jokainen Electron-työpöytäsovellusten kehitys-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Main- ja renderer-prosessien virheenkorjaus
- Yksikkötestaus Spectronilla
- Kokonaisvaltaisen testauksen työnkulut
- Moderni E2E-testaus Playwrightilla