ZAWODNIK

Testowanie, walidacja W3C, optymalizacja

INF.03 · teoria
autor: redakcja · 02.11.2026
Jak sprawdzić sklep w przeglądarkach, zweryfikować responsywność, użyć walidatorów HTML i CSS oraz poprawić pobieranie zasobów bez usuwania potrzebnej treści. Lekcja 6.4 kursu INF.03.

[ INF.03: PYTANIA Z TEGO DZIAŁU ]

Przejrzyj pytania: Projekt i publikacjaĆwicz temat: Projekt i publikacja
Te­sto­wa­nie strony to spraw­dza­nie, czy jej wygląd i dzia­ła­nie od­po­wia­da­ją wy­ma­ga­niom, a wa­li­da­cja to kon­tro­la kodu według reguł języka. Na eg­za­mi­nie od­róż­niasz te czyn­no­ści i do­bie­rasz na­rzę­dzia. W prak­ty­ce nie wy­star­czy, że sklep otwie­ra się na jednym kom­pu­te­rze: trzeba skon­tro­lo­wać for­mu­larz, zasoby, wąski ekran oraz kod fak­tycz­nie wy­sła­ny do prze­glą­dar­ki.

Test ma wa­run­ki i ocze­ki­wa­ny re­zul­tat

Przy­pa­dek te­sto­wy to opis sy­tu­acji, czyn­no­ści i ocze­ki­wa­ne­go wyniku. „Spraw­dzić for­mu­larz” nie mówi, co wpi­sa­no i co ma się wy­da­rzyć. „Po­zo­sta­wić imię puste, na­ci­snąć Zamów, ocze­ki­wać za­trzy­ma­nia wy­sył­ki i wska­za­nia pola” daje wynik, który da się po­rów­nać z za­cho­wa­niem strony. To samo po­dej­ście sto­su­je­my do ob­li­czeń i od­no­śni­ków.
Dla for­mu­la­rza sklepu sprawdź po­praw­ną ilość, war­tość po­ni­żej mi­ni­mum oraz pole puste. Prze­te­stuj przy­wró­ce­nie war­to­ści po­cząt­ko­wej, jeśli for­mu­larz ma przy­cisk re­se­to­wa­nia. Dla od­no­śni­ka do in­struk­cji sprawdź, czy plik ist­nie­je i czy pro­wa­dzi do niego wła­ści­wa ścież­ka. Zmiana koloru po na­je­cha­niu nie do­wo­dzi, że klik­nię­cie pro­wa­dzi do wła­ści­we­go zasobu.
Błąd opisuj tak, aby można go było od­two­rzyć. Podaj adres, prze­glą­dar­kę, sze­ro­kość widoku, kroki i wi­docz­ny wynik. Za­miast „strona nie działa” zapisz „po wpi­sa­niu ilości 2 i wy­sła­niu for­mu­la­rza serwer zwraca 404 pod ad­re­sem zamow.php”. Taki ko­mu­ni­kat kie­ru­je do spraw­dze­nia celu for­mu­la­rza. Bez wa­run­ków łatwo na­pra­wiać nie ten frag­ment apli­ka­cji, który za­wiódł.

Różne prze­glą­dar­ki i sze­ro­ko­ści

Test między prze­glą­dar­ka­mi spraw­dza, czy wi­try­na działa w kilku śro­do­wi­skach ob­słu­gi­wa­nych przez pro­jekt. Użyj na przy­kład Fi­re­fox i prze­glą­dar­ki opar­tej na Chro­mium. Dwa pro­gra­my wy­ko­rzy­stu­ją­ce ten sam silnik nie zawsze ujaw­nią róż­ni­cę, którą pokaże inny silnik. Kon­tro­luj nie tylko zrzut wy­glą­du, ale też for­mu­larz, mul­ti­me­dia, fokus i ko­mu­ni­ka­ty.
Re­spon­syw­ność ozna­cza do­sto­so­wa­nie układu do ob­sza­ru wy­świe­tla­nia. Sprawdź sze­ro­ki widok, średni i te­le­fo­nicz­ny, a także sze­ro­ko­ści po­mię­dzy nimi. Błąd może wy­stą­pić tuż przed punk­tem zmiany układu: nazwa pro­duk­tu prze­sta­je mie­ścić się w ko­lum­nie, zanim za­dzia­ła reguła dla te­le­fo­nu. Prze­su­wa­nie sze­ro­ko­ści okna po­zwa­la zna­leźć to miej­sce do­kład­niej niż obej­rze­nie dwóch koń­co­wych ob­ra­zów.
Na­rzę­dzia prze­glą­dar­ki po­tra­fią sy­mu­lo­wać roz­miar urzą­dze­nia, lecz nie za­stę­pu­ją wszyst­kich wła­ści­wo­ści praw­dzi­we­go te­le­fo­nu. Ob­słu­ga dotyku, kla­wia­tu­ra ekra­no­wa i wy­daj­ność mogą się różnić. Na etapie szkol­nym wy­ko­rzy­staj do­stęp­ne urzą­dze­nia i od­no­tuj zakres kon­tro­li. Test wą­skie­go okna nie do­wo­dzi au­to­ma­tycz­nie po­praw­no­ści każ­de­go urzą­dze­nia.
Sprawdź rów­nież długie treści: pełną nazwę mo­ni­to­ra, ko­mu­ni­kat błędu i duże po­więk­sze­nie. Jeżeli obszar pro­duk­tu ma sztyw­ną wy­so­kość, do­dat­ko­wy wiersz może wy­pchnąć przy­cisk poza ramkę. Dla braku zasobu prze­widź czy­tel­ną in­for­ma­cję za­miast pustej prze­strze­ni. Te­stu­je­my dane, które mogą się po­ja­wić, a nie wy­łącz­nie ide­al­ne napisy z ma­kie­ty.

Wa­li­da­tor HTML i CSS

Wa­li­da­tor ana­li­zu­je do­ku­ment wzglę­dem reguł wy­bra­ne­go języka. Dla współ­cze­sne­go HTML użyj Nu HTML Chec­ker W3C, a dla stylów W3C CSS Va­li­da­tion Se­rvi­ce. To różne kon­tro­le. Po­praw­ny arkusz CSS nie do­wo­dzi po­praw­no­ści struk­tu­ry do­ku­men­tu HTML, a pra­wi­dło­wy HTML nie po­twier­dza dzia­ła­nia skryp­tu.
Do­ku­ment można prze­ka­zać przez pu­blicz­ny adres, prze­słać jako plik lub wkleić do pola wej­ścio­we­go, za­leż­nie od na­rzę­dzia. Pu­blicz­ny wa­li­da­tor nie otwo­rzy two­je­go localhost, po­nie­waż ten adres po jego stro­nie wska­zu­je inny kom­pu­ter. Dla lo­kal­nej strony użyj pliku albo prze­ka­za­nia źródła. W przy­pad­ku PHP prze­ka­zu­je­my wy­ge­ne­ro­wa­ny HTML, nie kod ser­we­ra z in­struk­cja­mi PHP.
1
2
<label for="ilosc">Ilość</label>
<input id="ilosc" name="ilosc" type="number" min="1">
W po­praw­nym frag­men­cie ety­kie­ta wska­zu­je ist­nie­ją­ce pole. Jeśli na tej samej stro­nie inna kon­tro­l­ka ma iden­tycz­ne id, trzeba nadać jej uni­kal­ny iden­ty­fi­ka­tor i po­pra­wić po­wią­za­nia. Wa­li­da­tor może wykryć po­wtó­rze­nie iden­ty­fi­ka­to­ra, ale nie oceni sam, czy opis „Ilość” od­po­wia­da biz­ne­so­we­mu zna­cze­niu pola. To wymaga prze­glą­du treści i ob­słu­gi for­mu­la­rza.
Pro­ce­du­ra wa­li­da­cji obej­mu­je za­pi­sa­nie wersji, uru­cho­mie­nie kon­tro­li, odczyt ko­mu­ni­ka­tów, po­pra­wę i po­now­ne spraw­dze­nie. Za­czy­naj od wcze­śniej­szych błędów struk­tu­ry, po­nie­waż nie­do­mknię­ty ele­ment po­tra­fi wy­wo­łać serię dal­szych ko­mu­ni­ka­tów. Nie kasuj przy­pad­ko­wych znacz­ni­ków tylko po to, żeby zmniej­szyć licz­nik. Od­czy­taj lo­ka­li­za­cję i sens pro­ble­mu, na­stęp­nie sprawdź stronę rów­nież w prze­glą­dar­ce.
Wynik wa­li­da­cji do­ty­czy prze­ka­za­nej wersji do­ku­men­tu. Gdy póź­niej zmie­nisz for­mu­larz albo skrypt ge­ne­ru­ją­cy tabelę, kon­tro­lę trzeba po­wtó­rzyć dla istot­nych wa­rian­tów wyniku. Strona PHP może ge­ne­ro­wać po­praw­ny HTML dla pustej bazy i błędny po do­da­niu pro­duk­tu. Pomoc wa­li­da­to­ra W3C wy­ja­śnia też, że zgod­ność skła­dnio­wa nie jest pełną oceną ja­ko­ści strony.

Kon­so­la i po­bie­ra­nie za­so­bów

Kon­so­la to miej­sce wy­świe­tla­nia ko­mu­ni­ka­tów i błędów skryp­tów prze­glą­dar­ki. Otwórz ją, od­śwież stronę i wy­ko­naj te­sto­wa­ne dzia­ła­nie. Błąd od­wo­ła­nia do nie­ist­nie­ją­ce­go ele­men­tu może po­ja­wić się do­pie­ro po klik­nię­ciu. Nie uzna­waj braku ko­mu­ni­ka­tów pod­czas samego otwar­cia za dowód po­praw­no­ści wszyst­kich zda­rzeń.
Panel sieci, często na­zwa­ny Network (sieć), po­ka­zu­je żą­da­nia plików i od­po­wie­dzi ser­we­ra. Szukaj bra­ku­ją­cych ob­ra­zów, ar­ku­szy i skryp­tów. Od­po­wiedź 404 ozna­cza brak zasobu pod wska­za­nym ad­re­sem; od­po­wiedź 500 wska­zu­je błąd po stro­nie ser­we­ra. Sprawdź pełny adres oraz wiel­kość liter. Plik Mysz.jpg i od­wo­ła­nie do mysz.jpg mogą dzia­łać lo­kal­nie, a za­wieść po pu­bli­ka­cji na sys­te­mie roz­róż­nia­ją­cym wiel­kość liter.
Pamięć pod­ręcz­na prze­cho­wu­je wcze­śniej­sze od­po­wie­dzi, aby przy­spie­szać ko­lej­ne od­wie­dzi­ny. Pod­czas spraw­dza­nia po­praw­ki upew­nij się, że prze­glą­dar­ka po­bra­ła wła­ści­wą wersję. Nie usuwaj jednak całej kon­fi­gu­ra­cji bu­fo­ro­wa­nia jako sta­łe­go roz­wią­za­nia. Pro­blem kon­tro­li nowego pliku i po­trze­ba szyb­kie­go po­bie­ra­nia przy ko­lej­nych wi­zy­tach to dwa aspek­ty, które trzeba po­go­dzić.

Opty­ma­li­za­cja na pod­sta­wie po­mia­ru

Opty­ma­li­za­cja to zmniej­sza­nie kosztu dzia­ła­nia przy za­cho­wa­niu wy­ma­ga­ne­go re­zul­ta­tu. Za­cznij od zmie­rze­nia, które zasoby zaj­mu­ją naj­wię­cej danych lub czasu. Jeżeli zdję­cie myszy ma kilka me­ga­baj­tów i jest po­ka­za­ne jako mała mi­nia­tu­ra, przy­go­tuj od­po­wied­nie wy­mia­ry oraz kom­pre­sję. Nie ob­ni­żaj ja­ko­ści wszyst­kich plików w ciemno, bo drobne litery na sche­ma­cie mogą prze­stać być czy­tel­ne.
Obraz po­wi­nien mieć za­de­kla­ro­wa­ne wy­mia­ry lub pro­por­cje, aby prze­glą­dar­ka mogła za­re­zer­wo­wać miej­sce przed po­bra­niem. Dla ob­ra­zów poza po­cząt­ko­wym wi­do­kiem można roz­wa­żyć leniwe po­bie­ra­nie. Nie opóź­niaj bez powodu klu­czo­we­go zdję­cia wi­docz­ne­go od razu. Różne wa­rian­ty roz­mia­ru oraz for­ma­ty obrazu opi­su­je lekcja for­ma­tów gra­ficz­nych.
Usuń nie­uży­wa­ne zasoby i po­wtó­rzo­ne bi­blio­te­ki. Mi­ni­fi­ka­cja, czyli usu­nię­cie zbęd­nych znaków z plików wy­ni­ko­wych, może zmniej­szyć trans­fer, lecz nie na­pra­wia błęd­ne­go al­go­ryt­mu ani nie­dzia­ła­ją­ce­go for­mu­la­rza. Za­cho­waj czy­tel­ne źródła do dal­szej pracy. Po każdej opty­ma­li­za­cji wy­ko­naj test dzia­ła­nia, aby oszczęd­ność nie ozna­cza­ła utraty treści.

Na eg­za­mi­nie

W części pi­sem­nej wa­li­da­cja ozna­cza kon­tro­lę zgod­no­ści z re­gu­ła­mi języka, te­sto­wa­nie spraw­dza­nie za­cho­wa­nia, a opty­ma­li­za­cja po­pra­wę kosztu dzia­ła­nia. Jedno na­rzę­dzie nie wy­ko­nu­je wszyst­kich tych czyn­no­ści. W prak­ty­ce koń­co­wa kon­tro­la po­win­na objąć rze­czy­wi­sty plik i adres po­da­wa­ny do oceny, nie wcze­śniej­szą kopię w innym ka­ta­lo­gu.
Pu­łap­ka: prze­glą­dar­ka może na­pra­wić błędny HTML pod­czas wy­świe­tla­nia, więc po­praw­ny wygląd nie po­twier­dza po­praw­nej skład­ni.
Przejdź po wy­ma­ga­niach ar­ku­sza, sprawdź obie sze­ro­ko­ści, otwórz kon­so­lę i skon­tro­luj zasoby. Na­stęp­nie wy­ko­naj wa­li­da­cję oraz po­praw­ki. Jeżeli wy­ma­ga­ne są zrzuty lub ra­por­ty, przy­go­tuj je dla koń­co­we­go re­zul­ta­tu. Zrzut po­zy­tyw­ne­go wyniku sprzed ostat­niej zmiany nie po­twier­dza stanu od­da­wa­nej wersji.

Ściąga

Kon­tro­la
Co spraw­dza
Przy­pa­dek te­sto­wy
wa­run­ki, czyn­ność, ocze­ki­wa­ny wynik
Różne prze­glą­dar­ki
zgod­ność za­cho­wa­nia
Różne sze­ro­ko­ści
re­spon­syw­ność i kom­plet treści
Nu HTML Chec­ker
reguły HTML
W3C CSS Va­li­da­tor
reguły CSS
Kon­so­la
ko­mu­ni­ka­ty i błędy skryp­tu
Panel sieci
żą­da­nia, roz­mia­ry, błędy za­so­bów
Opty­ma­li­za­cja
koszt po po­mia­rze, bez utraty funk­cji
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: CMS: WordPress i Joomla!, instalacja, panel, szablony, wtyczki, aktualizacje, rolenastępna: SEO: jak wyszukiwarka widzi stronęspis działu: Projekt, CMS, testowanie, publikacja

[ INF.03: INNE ARTYKUŁY ]

Hub INF.03Zakres materiałuDokumenty CKEFormularze HTML na egzaminie INF.03Grafika i multimedia na egzaminie INF.03JavaScript na egzaminie INF.03Zapytania SQL na egzaminie INF.03Bazy danych i SQL na egzaminie INF.03pokaż więcej (85)
ZAWODNIK
egzamin zawodowy INF.02 · INF.03 · INF.04
Serwer Discord›
Egzaminy zawodowe IT/Matury/Studia
@yastor
Polityka prywatnościRegulaminKontakt
© 2026 Zawodnik · by Yastor
Arkusze i zasady oceniania pochodzą z CKE. Serwis nie jest powiązany z Centralną Komisją Egzaminacyjną.