code-box
This commit is contained in:
Lukáš Kaňka
parent
1c47484e74
commit
91cfe5f261
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
|
|
@ -59,36 +59,26 @@
|
|||
První dva body je možné udělat v GUI pomocí průzkumníka a pak otevřít
|
||||
terminál v tomto místě a do terminálu už jen vložit npm init -y , tím si
|
||||
připravíme projekt.</p>
|
||||
<table class="code">
|
||||
<tr>
|
||||
<th>
|
||||
<li>mkdir novy_projekt</li>
|
||||
<li>cd novy_projekt</li>
|
||||
<li>npm init -y</li>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
<div class="code-box">
|
||||
<p>mkdir novy_projekt</p>
|
||||
<p>cd novy_projekt</p>
|
||||
<p>npm init -y</p>
|
||||
</div>
|
||||
|
||||
|
||||
<p>Tímto nainstalujeme samotný Playwright.</p>
|
||||
<table class="code">
|
||||
<tr>
|
||||
<th>
|
||||
<li>npm i playwright</li>
|
||||
</th>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="code-box">
|
||||
<p>npm i playwright</p>
|
||||
</div>
|
||||
<p>Instalace nás provede, nastavením jako jestli chcete psát kód v JavaScriptu
|
||||
nebo TypeScriptu.</p>
|
||||
<p>
|
||||
Po instalaci můžeme začít psát samotný test.</p>
|
||||
<p>Test spustíme v terminálu v místě testu pomocí:</p>
|
||||
<table class="code">
|
||||
<tr>
|
||||
<th>
|
||||
<li>node test.js</li>
|
||||
</th>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="code-box">
|
||||
<p>node test.js</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="articles">
|
||||
<table>
|
||||
|
|
|
|||
|
|
@ -47,27 +47,22 @@
|
|||
<p>V JavaScript (TypeScript):
|
||||
Nainstalovat node.js Po vytvoření složek/ ropositáře přes terminal nainstalovat
|
||||
Playwright:</p>
|
||||
<table class="code">
|
||||
<tr>
|
||||
<th>npm init playwright@latest</th>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="code-box">
|
||||
<p>npm init playwright@latest</p>
|
||||
</div>
|
||||
<p>Test spustíme:</p>
|
||||
<table class="code">
|
||||
<tr>
|
||||
<th>npx playwright test</th>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="code-box">
|
||||
<p>npx playwright test</p>
|
||||
</div>
|
||||
|
||||
<p>Druhý způsob instalace:</p>
|
||||
<p>Dále je možné použít způsob testování: Node.js (instalace viz. jak začít.md)</p>
|
||||
<p>Veškeré informace oficial web:</p>
|
||||
<p>Všechni informace na oficiálním webu</p>
|
||||
<p>Zobrazení prohlížeče:</p>
|
||||
<table class="code">
|
||||
<tr>
|
||||
<th>do playwright.config.js(ts) přidat – > headless: false,</th>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="code-box">
|
||||
<p>do playwright.config.js(ts) přidat – > headless: false,</p>
|
||||
</div>
|
||||
<p>Do složky use: ta už je vytvořená.</p>
|
||||
<p>Otevřít stránku testu: (Navigace)</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,110 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="cz">
|
||||
|
||||
<head>
|
||||
<meta name="description" content="Dokumentace pro všechny testery" />
|
||||
<meta name="keywords" content="Playwright, Automatizované testování, Mocha reporter" />
|
||||
<meta name="author" content="Lukáš Kaňka" />
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<link rel="shortcut icon" href="images/a picture of a text editor on a pc in the style of comics.jpg" />
|
||||
<title>Testing Docs - Playwright Mocha Reporter</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Testing Docs CZ</h1>
|
||||
<h2>Dokumentace pro všechny testery</h2>
|
||||
<hr>
|
||||
<div class="menu">
|
||||
<center>
|
||||
<ul>
|
||||
<li class="menu-item"><a class="button" href="/index.html">Domů</a></li>
|
||||
<li class="menu-item"><a class="button" href="/podpora.html">Podpora</a></li>
|
||||
<li class="menu-item"><a class="button" href="/mapa-webu.html">Mapa webu</a></li>
|
||||
<li class="menu-item"><a class="button" href="/privaci-polici.html">Zásady o ochraně osobních dat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</center>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<div class="flexbox">
|
||||
<div class="navigation">
|
||||
<ul>
|
||||
<li><a class="button" href="/automatizovana-testovani.html">Automatizované testování</a></li>
|
||||
<li><a class="button" href="/nastroje.html">Nástroje</a></li>
|
||||
<li><a class="button" href="/penetracni-testovani.html">Penetrační testování</a></li>
|
||||
<li><a class="button" href="/testing-obecne.html">Testing obečně</a></li>
|
||||
<li><a class="button" href="/testovani-mobilnich-aplikaci.html">Testování mobilních aplikací</a></li>
|
||||
<li><a class="button" href="/testovani-pristupnosti.html">Testování přístupnosti</a></li>
|
||||
<li><a class="button" href="/zatezove-testovani.html">Zátěžové testování</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p class="big-text">Playwright Mocha Reporter</p>
|
||||
<p>Mocha HTML reporter.</p>
|
||||
<p>Mocha-html-reporter je knihovna, která umožňuje generovat HTML reporty protesty napsané pomocí Mocha
|
||||
frameworku (který lze použít i s Playwrightem).</p>
|
||||
<p>Pro instalaci stačí spustit příkaz:</p>
|
||||
<div class="code-box">
|
||||
<p>npm install mocha mocha-html-reporter --save-dev</p>
|
||||
</div>
|
||||
<p>Poté je třeba upravit konfigurační soubor pro Mocha a přidat plugin progenerování HTML reportů:</p>
|
||||
<div class="code-box">
|
||||
<p>const Mocha = require('mocha');</p>
|
||||
<p>const mocha = new Mocha</p>
|
||||
<p>({</p>
|
||||
<p>reporter: 'mocha-html-reporter',</p>
|
||||
<p>reporterOptions: {</p>
|
||||
<p>reportDir: './test-reports',</p>
|
||||
<p>reportName: 'test-report',</p>
|
||||
<p>reportTitle: 'Test Report'</p>
|
||||
<p>}</p>
|
||||
<p>});</p>
|
||||
</div>
|
||||
<p>Poté je možné spustit testy pomocí Mocha a HTML, report se vygenerujeautomaticky. vložíme:</p>
|
||||
<div class="code-box">
|
||||
<p>// Vytvořte HTML soubor pro report</p>
|
||||
<p>reportconst fs = require('fs');</p>
|
||||
<p>const date = new Date().toISOString().substring(0, 19).replace('T', ' ');</p>
|
||||
<p>const reportFileName = `report-${date}.html`;</p>
|
||||
<p>const reportFile = fs.createWriteStream(reportFileName);</p>
|
||||
<p>reportFile.write('<html>
|
||||
<https: //zive.cz>
|
||||
|
||||
<body>');</p>
|
||||
<p>reportFile.write('
|
||||
<h1>Example Report</h1>');</p>
|
||||
<p>reportFile.write(`
|
||||
<p>Tested at ${date}</p>`);</p>
|
||||
<p>reportFile.write('
|
||||
</body>
|
||||
|
||||
</html>');</p>
|
||||
<p>reportFile.end();</p>
|
||||
</div>
|
||||
<p>Výsledné reporty můžeme nastavit v mnoha parametrech než v této ukázcekódu. Toto je úplný základ. Více najdete v
|
||||
dokumentaci <a class="button" href="https://mochajs.org">Mocha.</a></p>
|
||||
</div>
|
||||
<div class="articles">
|
||||
<table>
|
||||
<caption>Nejdůležitější články:</caption>
|
||||
<tr>
|
||||
<th>
|
||||
<li><a class="button" target="_blank" href="articles/co-je-automatizovane-testovani.html">Co je
|
||||
automatizované
|
||||
testování</a>
|
||||
</li>
|
||||
</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>Copyright © Lukáš Kaňka 2023</footer>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -45,89 +45,48 @@
|
|||
<div class="content">
|
||||
<p class="big-text">Playwright první test</p>
|
||||
<p>Základní a jednoduchý test na webu Google</p>
|
||||
<table class="code">
|
||||
<tr>
|
||||
<th>import { test, expect } from '@playwright/test';</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>import { chromium } from '@playwright/test';</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>( async () => {</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>const browser = await chromium.launch();</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>const context = await browser.newContext();</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>const page = await context.newPage();</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>await page.goto('<https: //google.com>');</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>// Odsouhlasí cookies</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>await page.click('#L2AGLb');</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>// Klikněte na pole pro vyhledávání.</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>const searchInput = await page.$('[name="q"]');</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>await searchInput?.type('test');</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>// Potvrdíme vyhledávání stisknutím klávesy Enter</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th> await searchInput?.press('Enter');</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>await page.waitForNavigation();</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>console.log('Search results page title:', await
|
||||
page.title());</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>// Vypíše název stránky do konzole</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th> const title = await page.title();</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>console.log(title);</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>// Zavře prohlížeč kde probíhal test</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>await browser.close();</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th> });</th>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="code-box">
|
||||
<p>import { test, expect } from '@playwright/test';</p>
|
||||
<p>import { chromium } from '@playwright/test';</p>
|
||||
<p>( async () => {</p>
|
||||
<p>const browser = await chromium.launch();</p>
|
||||
<p>const context = await browser.newContext();</p>
|
||||
<p>const page = await context.newPage();</p>
|
||||
<p>await page.goto('<https: //google.com>');</p>
|
||||
<p>// Odsouhlasí cookies</p>
|
||||
<p>await page.click('#L2AGLb');</p>
|
||||
<p>// Klikněte na pole pro vyhledávání.</p>
|
||||
<p>const searchInput = await page.$('[name="q"]');</p>
|
||||
<p>await searchInput?.type('test');</p>
|
||||
<p>// Potvrdíme vyhledávání stisknutím klávesy Enter</p>
|
||||
<p>await searchInput?.press('Enter');</p>
|
||||
<p>await page.waitForNavigation();</p>
|
||||
<p>console.log('Search results page title:', await
|
||||
page.title());</p>
|
||||
<p>// Vypíše název stránky do konzole</p>
|
||||
<p>const title = await page.title();</p>
|
||||
<p>console.log(title);</p>
|
||||
<p>// Zavře prohlížeč kde probíhal test</p>
|
||||
<p>await browser.close();</p>
|
||||
<p>});</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="articles">
|
||||
<table>
|
||||
<caption>Nejdůležitější články:</caption>
|
||||
<tr>
|
||||
<th>
|
||||
<li><a class="button" href="articles/co-je-automatizovane-testovani.html">Co je automatizované
|
||||
<li><a class="button" href="articles/co-je-automatizovane-testovani.html">Co je
|
||||
automatizované
|
||||
testování</a>
|
||||
</li>
|
||||
</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer>Copyright © Lukáš Kaňka 2023</footer>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -51,6 +51,8 @@
|
|||
<li><a class="button" href="articles/playwright-jak-zacit.html">Playwright jak začít</a></li>
|
||||
<li><a class="button" href="articles/playwright-prvni-test.html">Playwright první test</a></li>
|
||||
<li><a class="button" href="articles/playwright-komplet-souhrn.html">Playwright komplet souhrn</a></li>
|
||||
<li><a class="button" href="articles/playwright-mocha-reporter.html">Playwright Mocha reporter</a></li>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="articles">
|
||||
|
|
|
|||
|
|
@ -48,7 +48,8 @@
|
|||
</p>
|
||||
<p>Docs je stále ve vývoji a pracuje se na ní pouze ve volném čase a v jedné osobě (tak děkuji za pochopení
|
||||
a
|
||||
případné chyby či nedostatky). Všekerý materiál by měl být na webu začátkem roku 2024.</p>
|
||||
případné chyby či nedostatky). Všekerý materiál by měl být nejpozději na webu začátkem jara 2024.
|
||||
Materiálu mám velké množství, ale vše se tam musí nabouchat a to dá chvilku zabrat 🙈.</p>
|
||||
<p>Pokud naleznete v Docs nejastnosti, chyby a nebo naopak vám něco chybí či by jste se chtěli aktivně
|
||||
jakkoliv
|
||||
podílet na tomto projektu budu rád když mě budete na lukas.kanka(zavináč)outlook.cz.</p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue