diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/articles/playwright-jak-zacit.html b/articles/playwright-jak-zacit.html index 99341e5..8697c9d 100644 --- a/articles/playwright-jak-zacit.html +++ b/articles/playwright-jak-zacit.html @@ -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.

- - - - -
-
  • mkdir novy_projekt
    • -
  • cd novy_projekt
    • -
  • npm init -y
    • -
    +
    +

    mkdir novy_projekt

    +

    cd novy_projekt

    +

    npm init -y

    +
    + +

    Tímto nainstalujeme samotný Playwright.

    - - - - -
    -
  • npm i playwright
    • -
    +
    +

    npm i playwright

    +

    Instalace nás provede, nastavením jako jestli chcete psát kód v JavaScriptu nebo TypeScriptu.

    Po instalaci můžeme začít psát samotný test.

    Test spustíme v terminálu v místě testu pomocí:

    - - - - -
    -
  • node test.js
    • -
    +
    +

    node test.js

    +
    diff --git a/articles/playwright-komplet-souhrn.html b/articles/playwright-komplet-souhrn.html index 1fc4b79..e6ee138 100644 --- a/articles/playwright-komplet-souhrn.html +++ b/articles/playwright-komplet-souhrn.html @@ -47,27 +47,22 @@

    V JavaScript (TypeScript): Nainstalovat node.js Po vytvoření složek/ ropositáře přes terminal nainstalovat Playwright:

    -
    - - - -
    npm init playwright@latest
    +
    +

    npm init playwright@latest

    +

    Test spustíme:

    - - - - -
    npx playwright test
    +
    +

    npx playwright test

    +
    +

    Druhý způsob instalace:

    Dále je možné použít způsob testování: Node.js (instalace viz. jak začít.md)

    Veškeré informace oficial web:

    Všechni informace na oficiálním webu

    Zobrazení prohlížeče:

    - - - - -
    do playwright.config.js(ts) přidat – > headless: false,
    +
    +

    do playwright.config.js(ts) přidat – > headless: false,

    +

    Do složky use: ta už je vytvořená.

    Otevřít stránku testu: (Navigace)

    diff --git a/articles/playwright-mocha-reporter.html b/articles/playwright-mocha-reporter.html new file mode 100644 index 0000000..df3e000 --- /dev/null +++ b/articles/playwright-mocha-reporter.html @@ -0,0 +1,110 @@ + + + + + + + + + + + + Testing Docs - Playwright Mocha Reporter + + + +

    Testing Docs CZ

    +

    Dokumentace pro všechny testery

    +
    +
    +
    + +
    +
    +
    + +
    +
    + +
    + +
    +

    Playwright Mocha Reporter

    +

    Mocha HTML reporter.

    +

    Mocha-html-reporter je knihovna, která umožňuje generovat HTML reporty protesty napsané pomocí Mocha + frameworku (který lze použít i s Playwrightem).

    +

    Pro instalaci stačí spustit příkaz:

    +
    +

    npm install mocha mocha-html-reporter --save-dev

    +
    +

    Poté je třeba upravit konfigurační soubor pro Mocha a přidat plugin progenerování HTML reportů:

    +
    +

    const Mocha = require('mocha');

    +

    const mocha = new Mocha

    +

    ({

    +

    reporter: 'mocha-html-reporter',

    +

    reporterOptions: {

    +

    reportDir: './test-reports',

    +

    reportName: 'test-report',

    +

    reportTitle: 'Test Report'

    +

    }

    +

    });

    +
    +

    Poté je možné spustit testy pomocí Mocha a HTML, report se vygenerujeautomaticky. vložíme:

    +
    +

    // Vytvořte HTML soubor pro report

    +

    reportconst fs = require('fs');

    +

    const date = new Date().toISOString().substring(0, 19).replace('T', ' ');

    +

    const reportFileName = `report-${date}.html`;

    +

    const reportFile = fs.createWriteStream(reportFileName);

    +

    reportFile.write(' + + + ');

    +

    reportFile.write(' +

    Example Report

    ');

    +

    reportFile.write(` +

    Tested at ${date}

    `);

    +

    reportFile.write(' + + +');

    +

    reportFile.end();

    +
    +

    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 Mocha.

    +
    +
    + + + + + +
    Nejdůležitější články:
    +
  • Co je + automatizované + testování +
    • +
    +
    +
    + + + + + + \ No newline at end of file diff --git a/articles/playwright-prvni-test.html b/articles/playwright-prvni-test.html index 09040ab..b1b22b2 100644 --- a/articles/playwright-prvni-test.html +++ b/articles/playwright-prvni-test.html @@ -45,89 +45,48 @@

    Playwright první test

    Základní a jednoduchý test na webu Google

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    import { test, expect } from '@playwright/test';
    import { chromium } from '@playwright/test';
    ( async () => {
    const browser = await chromium.launch();
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto('');
    // Odsouhlasí cookies
    await page.click('#L2AGLb');
    // Klikněte na pole pro vyhledávání.
    const searchInput = await page.$('[name="q"]');
    await searchInput?.type('test');
    // Potvrdíme vyhledávání stisknutím klávesy Enter
    await searchInput?.press('Enter');
    await page.waitForNavigation();
    console.log('Search results page title:', await - page.title());
    // Vypíše název stránky do konzole
    const title = await page.title();
    console.log(title);
    // Zavře prohlížeč kde probíhal test
    await browser.close();
    });
    +
    +

    import { test, expect } from '@playwright/test';

    +

    import { chromium } from '@playwright/test';

    +

    ( async () => {

    +

    const browser = await chromium.launch();

    +

    const context = await browser.newContext();

    +

    const page = await context.newPage();

    +

    await page.goto('');

    +

    // Odsouhlasí cookies

    +

    await page.click('#L2AGLb');

    +

    // Klikněte na pole pro vyhledávání.

    +

    const searchInput = await page.$('[name="q"]');

    +

    await searchInput?.type('test');

    +

    // Potvrdíme vyhledávání stisknutím klávesy Enter

    +

    await searchInput?.press('Enter');

    +

    await page.waitForNavigation();

    +

    console.log('Search results page title:', await + page.title());

    +

    // Vypíše název stránky do konzole

    +

    const title = await page.title();

    +

    console.log(title);

    +

    // Zavře prohlížeč kde probíhal test

    +

    await browser.close();

    +

    });

    +
    Nejdůležitější články:
    -
  • Co je automatizované +
  • Co je + automatizované testování
    • + + diff --git a/automatizovana-testovani.html b/automatizovana-testovani.html index f3ff06c..23f4aaf 100644 --- a/automatizovana-testovani.html +++ b/automatizovana-testovani.html @@ -51,6 +51,8 @@
  • Playwright jak začít
  • Playwright první test
  • Playwright komplet souhrn
    • +
  • Playwright Mocha reporter
    • +
    diff --git a/index.html b/index.html index 8f66159..1de930d 100644 --- a/index.html +++ b/index.html @@ -48,7 +48,8 @@

    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ří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 🙈.

    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.

    diff --git a/style.css b/style.css index c22dee8..9251419 100644 --- a/style.css +++ b/style.css @@ -47,13 +47,15 @@ h2 { color: white; } -.code { - font-family: monospace; - list-style-type: none; -} - td, th { border: 1px solid white; padding: 10px; } + +.code-box { + border: 1px solid white; + padding: 10px; + background-color: gray; + font-family: monospace; +}