Testeillä varmistetaan etteivät WordPress päivitykset riko sivustoa
Testatut päivitykset ovat aina olleet olennainen osa Seravon WordPress-palvelua. Ohjelmistojen pitäminen ajan tasalla on tärkeää sekä toiminnallisuuden että turvallisuuden kannalta. Valitettavasti kaikki muutokset uusissa ohjelmistoversioissa eivät aina ole hyviä, vaan voivat aiheuttaa regressioita. Seravolla suoritamme testejä ennen ja jälkeen päivityksiä varmistaaksemme, että sivusto ei rikkoudu päivitysten yhteydessä.
Testit käyttävät sivustoa kuin normaali käyttäjä
Testimme ovat niin sanottuja hyväksyntätestejä (tai integraatiotestejä), koska ne testaavat sivustoa korkealla tasolla (eivätkä yksittäisiä koodin osia, kuten yksikkötestit tekevät). Tavoitteena on selata sivustoa kuten todellinen kävijä ja löytää ongelmia, jotka voivat olla merkityksellisiä todellisille käyttäjille.
Testimme simuloivat muun muassa seuraavia käyttötapauksia:
Käyttäjä vierailee sivustolla esimerkki.fi/wp-login.php ja näkee kirjautumislomakkeen.
Kun käyttäjä täyttää oikean salasanan ja käyttäjätunnuksen, hän näkee WordPress-hallintapaneelin, mukaan lukien admin yläpalkin.
Järjestelmämme havaitsee, jos näiden simuloidun vierailun aikana ilmenee jokin seuraavista ongelmista:
HTTP-palvelimella ilmenee epäonnistuminen ja se antaa virhekoodin (esim. HTTP 500)
WordPress/PHP-koodi epäonnistuu eikä luo sivua, jota selain voisi järkevästi tulkita.
CSS-koodi ei lataudu tai kuvat tai muut resurssit eivät lataudu.
JavaScript lähettää varoituksia tai virheitä JavaScript-konsoliin.
Jos jokin edellä mainituista virheistä ilmenee, testi päättyy ja se antaa virheilmoituksen. Sivustoja jotka eivät läpäise testejä ei päivitetä.
Huomautus tietoturvapäivityksistä:
Jos tietoturvapäivitys katsotaan kriittiseksi, Seravo ohittaa mahdolliset testitulokset ja jatkaa tietoturvapäivityksen asentamista tarvittaessa.
wp-test komento ja Codeception-testit ottavat myös kuvakaappauksia sivustosta, joita käytetään myöhemmin testausjärjestelmämme toisessa vaiheessa visuaalisten regressioiden havaitsemiseen.
Testaus ei ole osa valvontaa
Kehittäjät voivat käyttää testausta varmistaakseen, että heidän tekemänsä koodimuutokset eivät riko sivustoa. Seravo käyttää testejä tarkistaakseen, että sivusto on kunnossa ennen päivityksiä ja niiden jälkeen. Seravo tekee myös monia muita sivustojen testejä, kuten tietoturvatestausta, PHP-version yhteensopivuustestausta jne.
Seravo valvoo kaikkia sivustoja ympäri vuorokauden, ja henkilökuntamme reagoi, jos havaitsemme, että sivusto on lakannut toimimasta. Valvonta perustuu muihin testeihin, ei näihin hyväksyntätesteihin.
Codeception ja Headless Chrome
Testausjärjestelmämme käyttää PHP-testauskehystä nimeltä Codeception. Tämä helpottaa WordPress-kehittäjien testien kirjoittamista verrattuna aiempaan Ruby-pohjaiseen testausjärjestelmäämme.
Sivuston selaaminen simuloidaan käyttämällä headless Google Chromea ja ChromeDriveria. Tämä on mahdollisimman lähellä todellista tilannetta ja merkittävä parannus edelliseen järjestelmäämme, jossa käytettiin PhantomJS:ää.
Edellisessä osiossa mainitut testit on jo toteutettu Seravolla ja ne muodostavat perustan kunkin sivuston testeille.
Testien ajaminen
Voit käyttää komentoa wp-test missä tahansa ympäristössä (tuotanto, staging varjo ja Docker-kehitysympäristö):
wp-test
I: Starting wp-test...
I: Using URL 'https://www.example.com' for pre-flight checks.
I: Pre-flight test for https://www.example.com returned HTTP code 200
I: Executing ChromeDriver...
Starting ChromeDriver 2.41.578700 (2f1ed5f9343c13f73144538f15c00b370eda6706) on port 9515
Only local connections are allowed.
I: Ensure test user exists...
I: Updated permission and password for existing test user...
I: Running Codecept test suite 1/1..
Codeception PHP Testing Framework v2.5.0
Powered by PHPUnit 6.5.13 by Sebastian Bergmann and contributors.
Running with seed:
Acceptance Tests (2) ----------------------------------------------------
⏺ Recording ⏺ step-by-step screenshots will be saved to /data/reports/tests/
Directory Format: record_5bcf04ca2322c_{testname} ----
✔ SeravoCheckWPHomeCest: Try to open home (1.86s)
✔ SeravoCheckWPLoginCest: Try to login and access wp admin (10.60s)
--------------------------------------------------------------------------
⏺ Records saved into: file:///data/reports/tests/records.html
Time: 12.76 seconds, Memory: 12.00MB
OK (2 tests, 3 assertions)
I: Lower test user privileges as test ended...
I: Finished running wp-test
Huomautus:
Seravo tai asiakkaamme voivat suorittaa nämä testit milloin tahansa, missä tahansa ympäristössä. Testit ovat turvallisia eivätkä ne aiheuta ongelmia edes tuotantokäytössä olevalla verkkosivustolla.
Kirjoita oma testisi
Tiedostot jotka sijaitsevat polussa /data/wordpress/tests/codeception/ suoritetaan. Ryhmitä samoja ominaisuuksia testaavat testit ja yritä nimetä tiedostot loogisesti, jotta yhteistyökumppanisi voivat myöhemmin helpommin debugata tai laajentaa testejä.
Jos tätä hakemistoa ei ole sivustollasi (tai sivustosi git-versiohallinnassa), voit luoda sen itse. Uuden sukupolven testausjärjestelmä on paljon yksinkertaisempi eikä se täytä sivustosi git-arkistoa ylimääräisillä tiedostoilla, kuten edellinen järjestelmämme teki.
Tuettuja mukautettuja testejä on kolmea tyyppiä:
Testejä jotka on kirjoitettu proseduraalisella PHP-koodilla tiedostoihin
/data/wordpress/tests/codeception/acceptance/*Cept.phpTestejä jotka on kirjoitettu objekti-orientoidulla PHP-luokalla tiedostoihin
/data/wordpress/tests/codeception/acceptance/*Cest.phpMukautettu Codeception-testi joka on määritelty tiedostossa
/data/wordpress/tests/codeception/custom.yml
1. Yksinkertaisin versio: *Cept.php tiedostot
Tämä on hyvin suoraviivainen ja helppo tapa kirjoittaa ja ylläpitää pientä määrää testejä. Esimerkki tiedostonimestä: /data/wordpress/tests/codeception/acceptance/ExampleCept.php
<?php
$I = new AcceptanceTester($scenario);
$I->amOnPage('/');
$I->checkBrowserConsole();
$I->see('WordPress');
2. Elegantti tapa: *Cest.php tiedostot
Oikeiden PHP-luokkien käyttö mahdollistaa testien tulosteen ja niiden suorittamistavan hallinnan. Huomaa, että kukin tiedosto voi sisältää vain yhden PHP-luokan ja että luokan nimen on vastattava tiedoston nimeä.
Esimerkki tiedostonimestä: /data/wordpress/tests/codeception/acceptance/ExampleCest.php
<?php
class ExampleCest {
/**
* Open front page (/)
**/
public function openFrontPage(\AcceptanceTester $I) {
$I->amOnPage('/');
$I->checkBrowserConsole();
$I->see('WordPress');
}
}
Esimerkki tiedostonimestä: /data/wordpress/tests/codeception/acceptance/UserCheckWPHomeCest.php
<?php
class UserCheckWPHomeCest
{
/**
* Try to do search using form on homepage (/)
**/
public function trySubmittingSearch(\AcceptanceTester $I)
{
// Navigate to homepage (/)
$I->amOnPage('/');
// Check that the browser console is empty (e.g no JavaScript errors)
$I->checkBrowserConsole();
// Check that string 'Lorem ipsum' is found
$I->see('Lorem ipsum');
// Check that we see h1 level header with id 'maintitle'
$I->seeElement('h1#maintitle');
// Check that we see from with name 'searchform'
$I->seeElement('form[name=searchform]');
// Fil field with name 'search' with value 'mysearchtermgoeshere'
$I->fillField('input[name=search]', 'mysearchtermgoeshere');
// Submit the form by clicking element with id 'submitSearchForm'
$I->click('#submitSearchForm');
// Check that we see string 'Search results:' on the page after clicking submit above ^
$I->see('Search results:');
// Make screenshot of the result page
$I->makeScreenshot('searchresults');
}
/**
* Check that hidden element exists on a page
*
* Backend used by our testing environment doesn't "see" elements that are hidden to user,
* but we can check if these elements exists by looking at DOM.
*/
public function tryIfNonVisibleElementExists(\AcceptanceTester $I) {
// navigate to page /example
$I->amOnPage('/example');
// Search element in DOM (by id, yet again)
$I->seeElementInDOM('#myhiddenelement');
// Navigate to another page
$I->amOnPage('/example2');
// Make sure we DON'T see unwanted element that should be on this page
$I->dontSeeElementInDOM('h3#thisshouldnotexist');
}
}
Voit kokeilla uutta testiäsi suorittamalla seuraavan komennon:
wp-test --debug --fail-fast
Huomautus: Testatut Wordpress-päivitykset sisältyvät kaikkiin Seravo.com paketteihin. Mukautettujen testien kirjoittaminen tai jonkun muun kirjoittamien mukautettujen testien virheenkorjaus ei sisälly kuukausimaksuun. Voit kuitenkin milloin tahansa ostaa sivustollesi räätälöityjä palveluita tuntihintaan, mukaan lukien mukautettujen testien kirjoittamisen.
3. Mukautettu Codeception-testin määritelmä: custom.yml
Testimme tukevat myös täysin mukautettuja Codeception-testejä. Aseta testin tiedostot polkuun /data/wordpress/tests/codeception ja varmista, että siellä on määritelmätiedosto nimeltä custom.yml, joka voidaan suorittaa komennolla codecept run
Apufunktioiden luettelo
WordPress-apumoduuli
Nämä testit käyttävät projektissa mukana olevaa apumoduulia SeravoAcceptanceHelper.
// return current environment (production, development, staging, update)
$I->getEnvironment();
// return true or false if tests run in specific environment
$I->isProduction();
$I->isDevelopment();
// get an array containing the browser console contents
$I->getConsoleLog();
Luettelo Codeception-toiminnoista
Katso lisätietoja hyväksyntätesteistä Codeception-dokumentaatiosta.
// Navigating
$I->amOnPage('/path/to/navigate?value=1');
// Clicking links and buttons
$I->click('#elementId');
$I->click('a.classnamehere');
$I->click('input[name=ok]');
// Interacting with forms
$I->fillField('field-identifier', 'value');
// Querying
$I->seeInTitle('this should be in <title> tag');
$I->see('My title');
$I->seeElement('//table/tr'); // XPath
$I->seeElement('h1'); // by tag
$I->seeElement('#id'); // by id
$I->seeElement('.classname'); // by class
$I->seeElement('div#main p.intro'); // CSS selectors
// Check that browser console is empty
$I->checkBrowserConsole();
// Check that browser console is empty ignoring warnings
$I->checkBrowserConsole(true);
// Check that browser console is empty ignoring warnings
// and ignoring one specified severe message
$I->checkBrowserConsole(true, array(
array(
"level" => "SEVERE",
"message" => ".* Uncaught DOMException: play() failed because the user didn't interact with the document first.",
"regex" => true
)
);
Miten whitelistataan tiettyjä harmittomia Chrome-konsolivirheitä
Yleensä, jos Chrome-kehittäjäkonsoli tulostaa jotain testausjärjestelmämme pitää sitä virheenä riippumatta siitä liittyykö se JavaScriptiin, CSS-lataamiseen, kuvien lataamiseen, sekasisällön turvallisuusvaroituksiin tai johonkin muuhun.
Joskus Chrome-konsolin viestit voivat kuitenkin olla vääriä positiivisia tuloksia eivätkä todellisia virheitä, jotka on korjattava. Niiden käsittelemiseksi tarjoamme konsoliviestien whitelistauksen.
Tyypillinen esimerkki väärästä hälytyksestä on tämä JQuery-vanhentumisvaroitus, jonka useimmat verkkosivustojen kehittäjät ovat nähneet jossain:
WARNING: https://example/wp-includes/js/jquery/jquery-migrate.js?ver=1.4.1 44:11 “JQMIGRATE: jQuery.browser is deprecated”
Whitelistaa ilmoitus komennolla wp-test-whitelist
Jos haluat ohittaa viestin koko sivustolla, suositeltavin tapa on käyttää komentoa wp-test-whitelist. Otetaan esimerkkinä yllä oleva viesti. Voit ohittaa sen suorittamalla komennon wp-test-whitelist --add ”.* JQMIGRATE: .* is deprecated” --regex. Tämä komento muuttaa alla esitettyä Codeception-sallittujen luetteloa. Saat lisätietoja tästä komennosta ajamalla wp-test-whitelist --help
Muokkaa whitelist tiedostoa manuaalisesti
Voit ohittaa viestin myös muokkaamalla manuaalisesti whitelist-tiedostoa. Luo tiedosto nimellä ja polulla /data/wordpress/tests/codeception/acceptance/console-whitelist.json ja lisää siihen seuraava sisältö:
[
{
"level": "WARNING",
"message": ".* JQMIGRATE: .* is deprecated",
"regex": true
}
]
Message-kenttä on pakollinen ja sen on oltava joko whitelistattava merkkijono tai säännöllinen lauseke. Jos käytetään säännöllisiä lausekkeita, regex-kenttä on myös asetettava arvoon true. Level-kenttä ei ole pakollinen.
Huomaa, että koska JSON käyttää kauttaviivaa pakomerkkinä, säännöllisissä lausekkeissa käytetyt kauttaviivat on pakomerkitettävä. Tämä tarkoittaa, että säännöllinen lauseke jquery\.com on kirjoitettava esimerkiksi muodossa jquery\\.com.
Voit myös lisätä konsoliviestit whitelistatuksi testikohtaisesti välittämällä mukautetun taulukon toisena parametrina väitteeseen $I->checkBrowserConsole(). Sivustokohtaisen whitelistauksen käytöllä on se etu, että se vaikuttaa kaikkiin checkBrowserConsole()-kutsuihin, mukaan lukien Seravon sivustollesi suorittamiin testeihin.