kankys/testing-docs.cz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

oprava css

Browse Source
This commit is contained in:
Lukáš Kaňka 2024-01-08 13:39:16 +01:00
parent 406f990f6a
commit 483da46058
2 changed files with 174 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

256
articles/playwright-jak-zacit.html
View File

@ -2,144 +2,146 @@
<html lang="cz"> <html lang="cz">
<head> <head>
<meta content="Dokumentace pro všechny testery" name="description" /> <meta content="Dokumentace pro všechny testery" name="description"/>
<meta content="Playwright, Automatizované testovaní, Testování software" name="keywords" /> <meta content="Playwright, Automatizované testovaní, Testování software" name="keywords"/>
<meta content="Lukáš Kaňka" name="author" /> <meta content="Lukáš Kaňka" name="author"/>
<meta charset="UTF-8" /> <meta charset="UTF-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport" /> <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="/style.css" rel="stylesheet" /> <link href="/style.css" rel="stylesheet"/>
<link href="images/a picture of a text editor on a pc in the style of comics.jpg" rel="shortcut icon" /> <link href="images/a picture of a text editor on a pc in the style of comics.jpg" rel="shortcut icon"/>
<title>Testing Docs - Playwright jak začít</title> <title>Testing Docs - Playwright jak začít</title>
</head> </head>
<body> <body>
<h1>Testing Docs CZ</h1> <h1>Testing Docs CZ</h1>
<h2>Dokumentace pro všechny testery</h2> <h2>Dokumentace pro všechny testery</h2>
<hr /> <hr/>
<div class="menu"> <div class="menu">
<center> <center>
<ul> <ul>
<li class="menu-item"> <li class="menu-item">
<a class="button" href="/index.html">Domů</a> <a class="button" href="/index.html">Domů</a>
</li> </li>
<li class="menu-item"> <li class="menu-item">
<a class="button" href="/podpora.html">Podpora</a> <a class="button" href="/podpora.html">Podpora</a>
</li> </li>
<li class="menu-item"> <li class="menu-item">
<a class="button" href="/mapa-webu.html">Mapa webu</a> <a class="button" href="/mapa-webu.html">Mapa webu</a>
</li> </li>
<li class="menu-item"> <li class="menu-item">
<a class="button" href="/privaci-polici.html">Zásady o ochraně osobních dat</a> <a class="button" href="/privaci-polici.html">Zásady o ochraně osobních dat</a>
</li> </li>
</ul> </ul>
</center> </center>
</div>
<hr/>
<div class="flexbox">
<div class="navigation">
<table>
<caption>
Rubriky:
</caption>
<tr>
<th>
<li>
<a class="button" href="/automatizovane-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>
</th>
</tr>
</table>
</div> </div>
<hr />
<div class="flexbox"> <div class="content">
<div class="navigation"> <p class="big-text">Playwright jak začít</p>
<table> <p>Založení nového projektu</p>
<caption> <p>
Rubriky: Zde je návod jak nainstalovat Playwright jako v freamork k JavaScriptu
</caption> či TypeScriptu. Playwright navíc podporuje Python, Javu a .Net. Jako
<tr> první doporučuji naštívit Officiální web
<th> <a class="button" href="https://playwright.dev">Playwright enables reliable end-to end testing for
<li> modern web
<a class="button" href="/automatizovane-testovani.html">Automatizované testování</a> apps.</a>
</li> Kde najdete skvělou dokumentaci k Playwright.
<li><a class="button" href="/nastroje.html">Nástroje</a></li> </p>
<li> <p>
<a class="button" href="/penetracni-testovani.html">Penetrační testování</a> Je nutné stáhnout a nainstalovat
</li> <a class="button" href="https://nodejs.org/en">Node.js.</a>
<li> </p>
<a class="button" href="/testing-obecne.html">Testing obečně</a> <p>
</li> Do VSCode stáhnout Extensions
<li> <strong>Playwright Test for VSCode</strong>
<a class="button" href="/testovani-mobilnich-aplikaci.html">Testování mobilních aplikací</a> </p>
</li> <p>
<li> Mkdir vytvoří v cmd / terminálu složku pro nový projekt, v místě kde
<a class="button" href="/testovani-pristupnosti.html">Testování přístupnosti</a> se nacházíme.
</li> </p>
<li> <p>
<a class="button" href="/zatezove-testovani.html">Zátěžové testování</a> cd název nového projektu nás přesune do složky nového projektu První
</li> dva body je možné udělat v GUI pomocí průzkumníka a pak otevřít
</th> terminál v tomto místě a do terminálu už jen vložit npm init -y , tím
</tr> si připravíme projekt.
</table> </p>
<div class="code-box">
<p>mkdir novy_projekt</p>
<p>cd novy_projekt</p>
<p>npm init -y</p>
</div> </div>
<div class="content"> <p>Tímto nainstalujeme samotný Playwright.</p>
<p class="big-text">Playwright jak začít</p> <div class="code-box">
<p>Založení nového projektu</p> <p>npm i playwright</p>
<p>
Zde je návod jak nainstalovat Playwright jako v freamork k JavaScriptu
či TypeScriptu. Playwright navíc podporuje Python, Javu a .Net. Jako
první doporučuji naštívit Officiální web
<a class="button" href="https://playwright.dev">Playwright enables reliable end-to end testing for
modern web
apps.</a>
Kde najdete skvělou dokumentaci k Playwright.
</p>
<p>
Je nutné stáhnout a nainstalovat
<a class="button" href="https://nodejs.org/en">Node.js.</a>
</p>
<p>
Do VSCode stáhnout Extensions
<strong>Playwright Test for VSCode</strong>
</p>
<p>
Mkdir vytvoří v cmd / terminálu složku pro nový projekt, v místě kde
se nacházíme.
</p>
<p>
cd název nového projektu nás přesune do složky nového projektu 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>
<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>
<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>
<div class="code-box">
<p>node test.js</p>
</div>
</div> </div>
<div class="articles"> <p>
<table> Instalace nás provede, nastavením jako jestli chcete psát kód v
<caption> JavaScriptu nebo TypeScriptu.
Nejdůležitější články: </p>
</caption> <p>Po instalaci můžeme začít psát samotný test.</p>
<tr> <p>Test spustíme v terminálu v místě testu pomocí:</p>
<th> <div class="code-box">
<li> <p>node test.js</p>
<a class="button" href="co-je-automatizovane-testovani.html">Co je automatizované
testování</a>
</li>
<li>
<a class="button" href="otazky-a-odpovedi-playwright.html">Otázky a odpovědí k
Playwright</a>
</li>
</th>
</tr>
</table>
</div> </div>
</div> </div>
<footer>Copyright &copy; Lukáš Kaňka 2023</footer> <div class="articles">
<table>
<caption>
Nejdůležitější články:
</caption>
<tr>
<th>
<li>
<a class="button" href="co-je-automatizovane-testovani.html">Co je automatizované
testování</a>
</li>
<li>
<a class="button" href="otazky-a-odpovedi-playwright.html">Otázky a odpovědí k
Playwright</a>
</li>
</th>
</tr>
</table>
</div>
</div>
<footer>Copyright &copy; Lukáš Kaňka 2023</footer>
</body> </body>
</html> </html>

90
style.css
View File

@ -1,100 +1,100 @@
:root { :root {
--special_black: rgb(11, 2, 2); --special_black: rgb(11, 2, 2);
--special_white: white; --special_white: white;
--special_grey: grey; --special_grey: grey;
--special_black_original: black; --special_black_original: black;
} }
body { body {
background-color: var(--special_black); background-color: var(--special_black);
color: var(--special_white); color: var(--special_white);
width: calc(100% - 32px); width: calc(100% - 32px);
max-width: 1200px; max-width: 1200px;
margin: auto; margin: auto;
} }
.menu-item { .menu-item {
display: inline-block; display: inline-block;
width: 200px; width: 200px;
height: 20px; height: 20px;
position: static; position: static;
text-align: center; text-align: center;
} }
.flexbox { .flexbox {
display: flex; display: flex;
} }
.navigation { .navigation {
flex: 1; flex: 1;
/* margin: 0px 0px 0px 50px; */ /* margin: 0px 0px 0px 50px; */
padding: 25px; padding: 25px;
/* margin-top: 20px; */ /* margin-top: 20px; */
} }
.content { .content {
flex: 3; flex: 3;
/* margin-top: 20px; */ margin-bottom: 25px;
} }
.articles { .articles {
margin: 0px 50px 0px 0px; margin: 0px 50px 0px 0px;
margin-top: 25px; margin-top: 25px;
} }
footer { footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
} }
.big-text { .big-text {
font-size: 40px; font-size: 40px;
text-align: center; text-align: center;
} }
h1 { h1 {
font-family: cursive; font-family: cursive;
margin: 0px 0px 0px 30px; margin: 0px 0px 0px 30px;
} }
h2 { h2 {
font-family: cursive; font-family: cursive;
margin: 0px 0px 0px 30px; margin: 0px 0px 0px 30px;
} }
/*.link-white*/ /*.link-white*/
.button { .button {
color: var(--special_white); color: var(--special_white);
} }
td, td,
th { th {
border: 1px solid var(--special_white); border: 1px solid var(--special_white);
padding: 10px; padding: 10px;
} }
.code-box { .code-box {
border: 1px solid var(--special_white); border: 1px solid var(--special_white);
padding: 10px; padding: 10px;
background-color: var(--special_grey); background-color: var(--special_grey);
font-family: monospace; font-family: monospace;
color: var(--special_black_original); color: var(--special_black_original);
font-weight: bold; font-weight: bold;
border-radius: 8px; border-radius: 8px;
} }
.not-dot { .not-dot {
list-style-type: none; list-style-type: none;
} }
.link { .link {
color: var(--special_white); color: var(--special_white);
} }
.strong-text { .strong-text {
font-weight: bold; font-weight: bold;
} }
.link-black { .link-black {
color: var(--special_black_original); color: var(--special_black_original);
} }