„Cypress: jak testovat soubory Docx“ nebo „Ověření stažených souborů testem e2e“

Velmi často se jedná o testovací případ: stáhněte si soubor ze stránky a ověřte, že je stažen a obsahuje příslušné informace. Jedním z možných řešení je stáhnout soubor, převést jej do čitelného formátu a ověřit. K dosažení tohoto cíle používáme Cypress, mamutí převaděč a několik dalších nástrojů.

V tomto článku si ukážeme příklady implementace dalšího scénáře:

- stáhnout soubor Docx z webové aplikace do systému souborů - najít stažený soubor - převést ho do HTML dokumentu - ověřit obsah v dokumentu

Nástroje, které budou použity

  • cypřiš
  • strojopis
  • žádost
  • přeměnit mamutí
  • fs

Pojďme!

1. Stáhněte si soubor DOCX z webové aplikace pomocí cypress testu

Nejprve musíme otevřít stránku a najít ten prvek na stránce, který spustí stahování souboru. S obvyklým nástrojem pro kontrolu je snadné pracovat:

Ve výše uvedeném příkladu máme prvek HTML se specifickým atributem 'href' a jeho hodnotou. A otevření adresy URL z atributu „href“ spustí stahování automaticky.

Vypadá tedy celkem snadno: musíme pouze otevřít adresu URL. Pokud to však uděláme, uvidíme soubor stažený v tomto konkrétním adresáři, který byl jako výchozí nastaven pro váš prohlížeč. V mém počítači se systémem Windows to bylo „C: \ Users \ Users \ Downloads“. A bohužel si nemůžeme ani představit, jaký výchozí adresář bude v našem počítači CI.

Ti inženýři, kteří pracovali se selenem, najdou způsob, jak v nastavení CYpress nastavit tento výchozí adresář pro ukládání souborů. Tento parametr však ještě není konfigurovatelný, viz problém: https://github.com/cypress-io/cypress/issues/4675

Jako řešení tedy musíme jít do souboru plugins / index.js a rozšířit jej o další metody:

on ('task', {downloadDocx (args) {const directory = `cypress / $ {args.directory}`; návrat new Promise ((vyřešení, odmítnutí) => {request ({url: args.url, encoding: null) , záhlaví: {Cookie: ''}}, funkce (err, res, body) {if (! res) {return odmítnutí (nová chyba ('Žádná odpověď vrácena při stahování souboru')));} if (res. statusCode! == 200) {odmítnutí návratu (nová chyba ('Chybný stavový kód při stahování souboru:' + res.statusCode));} const contentDisposition = res.headers ['content-disposition']; if (! contentDisposition) {odmítnutí návratu (nová chyba ('Nefunkční odpověď: neobsahuje obsah-inline inline file type')));} const filenameRegex = /filename[^;=\n]*=((['"]).*? \ 2 | [^; \ n] *) /; const odpovídá = filenameRegex.exec (contentDisposition); if (odpovídá == null ||! Odpovídá [1]) {odmítnutí návratu (nová chyba ('Nefunkční odpověď: ne obsahovat název souboru '));} const fileName = odpovídá [1] .replace (/ [' "] / g, ''); fs.writeFileSync (adresář + název_souboru, tělo); rozlišení (tělo);});}) ;}, isExistDocx () {návrat nový Promise ((vyřešit, odmítnout) => {if (fs.existsSync (`cypress / filename.docx`))) {vrátit rozlišení ('Soubor docx existuje'); } else {return odmítnout (nová chyba ('File docx NE existuje')); }}); }});

Tímto vytvoříme několik úkolů, které by měl být cypress schopen spustit: stáhněte si soubor Docx a ověřte, že tento soubor existuje. První metoda by měla použít několik argumentů: {url: řetězec, adresář: řetězec, cookies: objekt} a druhá - je neplatný typ.

Další, co potřebujeme - je vytvořit dva příkazy, které používají tyto úlohy pluginu (v cypress / support / příkaz.j.j):

Cypress.Commands.add ('downloadDocx', (url, adresář) => {return cy.getCookies (). Then (cookies => {return cy.task ('downloadDocx', {url: url, adresář: adresář, cookies) : cookies});});}); Cypress.Commands.add ('isExistDocx', () => {cy.task ('isExistDocx');});

A abyste mohli tyto metody používat v řetězci, otevřete soubor index.d.ts a rozšířte své Chainable Interface:

downloadDocx (url: string, adresář: string): Chainable isExistDocx (): Chainable

2. Najděte stažený soubor

V testu nyní stačí vše, co potřebujete - volat dříve vytvořené metody:

it ('stáhněte soubor DOCX testem e2e', () => {cy.get ('a'). poté (element => {cy.downloadDocx ((Cypress.config (). baseUrl + element.attr ('href) ') .substr (1)),' dirName ');}); cy.isExistDocx ();});

Nyní budou všechny stažené soubory uloženy v adresáři cypress. Nezapomeňte tedy testovací stav uložit jasně. K tomu před / po tomto testu - vymažte dříve chocholaté dokumenty a složky.

3. Převeďte soubor DOCX na dokument HTML pomocí Cypress

Chcete-li převést soubory docx do HTML, musíte udělat následující věci:

  • Vytvořte skript v souboru package.json pro převod souboru, například:
"file-convert": "mammoth cypress / myfile.docx cypress / myfile.html"
  • Pomocí tohoto skriptu v testu můžete automaticky převést soubor uvnitř testu:
cy.exec ('npm run file-convert', {failOnNonZeroExit: false}). then ((obj) => {expect (obj.code) .to.be.not.null; expect (obj.stderr) .to .contain ('nějakou hodnotu');});

Musíte vědět, že tento test by mohl selhat na počítačích se systémem Windows kvůli problému: https://github.com/cypress-io/cypress/issues/789 Ale pokud vaše vzdálené počítače na serverech CI jiných než Windows, - pak bude vše v pořádku.

4. Ověřte obsah v dokumentu DOCX pomocí Cypress

Chcete-li do převedeného dokumentu přidat tvrzení a ověření, musíte vytvořit samostatnou specifikaci a přidat podobnou logiku:

description ('Ověřte převedený DOCX na HTML', () => {before () => {Cypress.config ('baseUrl', null); cy.visit ('./ cypress / myfile.html', {timeout: 10000});}); (`vyzkoušejte požadovaná pole a hodnoty uvnitř dokumentu ', () => {cy.get (' p '). Invoke (' text '). Should (' obsahuje ',' Nějaký text ') ); cy.get ('p'). obsahuje ('Nějaký text'). should ('be.visible');});});

Do tohoto testu můžete přidat tolik tvrzení, kolik chcete, pomocí obvyklých možností Cypress: https://docs.cypress.io/guides/references/assertions.html#BDD-Assertions

Gratuluji! S tím jsme skončili! Nyní můžeme snadno stáhnout soubory z naší webové aplikace, poté je převést do správného formátu a dokonce ověřit obsah uvnitř.

Máte-li jakékoli dotazy \ návrhy \ komentáře - kontaktujte mě prostřednictvím: - Přímé komentáře - Twitter - Linkedin