Jak używać Selenium IDE ze skryptami & Polecenia (potwierdź, zweryfikuj)

Spisie treści:

Anonim

Będziemy używać strony internetowej Mercury Tours jako testowanej aplikacji internetowej. Jest to system rezerwacji lotów online, który zawiera wszystkie elementy potrzebne do tego samouczka. Jego adres URL to http://demo.guru99.com/test/newtours/ i będzie to nasz podstawowy adres URL.

Utwórz skrypt przez nagrywanie

Stwórzmy teraz nasz pierwszy skrypt testowy w Selenium IDE przy użyciu najpopularniejszej metody - nagrania. Następnie wykonamy nasz skrypt za pomocą funkcji odtwarzania.

Krok 1

  • Uruchom Firefox i Selenium IDE.
  • Wpisz wartość naszego podstawowego adresu URL: http://demo.guru99.com/test/newtours/.
  • Włącz przycisk nagrywania (jeśli nie jest jeszcze włączony domyślnie).
Krok 2

W przeglądarce Firefox przejdź do http://demo.guru99.com/test/newtours/. Firefox powinien przenieść Cię na stronę podobną do pokazanej poniżej.

Krok 3
  • Kliknij prawym przyciskiem myszy dowolne puste miejsce na stronie, takie jak logo Mercury Tours w lewym górnym rogu. Spowoduje to wyświetlenie menu kontekstowego Selenium IDE. Uwaga: nie klikaj żadnych obiektów ani obrazów, do których prowadzą hiperłącza
  • Wybierz opcję „Pokaż dostępne polecenia”.
  • Następnie wybierz opcję „assertTitle exact: Welcome: Mercury Tours”. To polecenie zapewnia poprawność tytułu strony.
Krok 4
  • W polu tekstowym „Nazwa użytkownika” Mercury Tours wpisz nieprawidłową nazwę użytkownika „invalidUNN”.
  • W polu tekstowym „Hasło” wpisz nieprawidłowe hasło „nieprawidłowyPWD”.
Krok 5
  • Kliknij przycisk „Zaloguj się”. Firefox powinien przenieść Cię na tę stronę.
Krok 6

Wyłącz przycisk nagrywania, aby zatrzymać nagrywanie. Twój skrypt powinien teraz wyglądać jak ten pokazany poniżej.

Krok 7

Teraz, gdy skończyliśmy z naszym skryptem testowym, zapiszemy go w przypadku testowym. W menu Plik wybierz „Zapisz przypadek testowy”. Alternatywnie możesz po prostu nacisnąć Ctrl + S.

Krok 8
  • Wybierz żądaną lokalizację, a następnie nazwij przypadek testowy jako „Invalid_login”.
  • Kliknij przycisk „Zapisz”.
Krok 9.

Zwróć uwagę, że plik został zapisany jako HTML.

Krok 10.

Wróć do Selenium IDE i kliknij przycisk Playback, aby wykonać cały skrypt. Selenium IDE powinno być w stanie bezbłędnie powielać wszystko.

Wprowadzenie do poleceń selenu - Selenese

  • Polecenia seleńskie mogą mieć maksymalnie dwa parametry: cel i wartość.
  • Parametry nie są wymagane przez cały czas. To zależy od tego, ile polecenia będzie potrzebować.

3 rodzaje poleceń

działania

Są to polecenia, które bezpośrednio współdziałają z elementami strony.

Przykład: polecenie „kliknij” jest akcją, ponieważ bezpośrednio wchodzisz w interakcję z elementem, na który klikasz.

Polecenie „typ” jest również działaniem, ponieważ umieszczasz wartości w polu tekstowym, a pole tekstowe wyświetla je w zamian. Między tobą a polem tekstowym zachodzi dwukierunkowa interakcja.

Akcesoria

Są to polecenia, które umożliwiają przechowywanie wartości w zmiennej.

Przykład: polecenie „storeTitle” jest akcesorium, ponieważ tylko „odczytuje” tytuł strony i zapisuje go w zmiennej. Nie wchodzi w interakcje z żadnym elementem na stronie.

Twierdzenia

Są to polecenia, które sprawdzają, czy określony warunek jest spełniony.

3 Rodzaje twierdzeń

  • Assert . Gdy polecenie „assert” nie powiedzie się, test jest natychmiast zatrzymywany.
  • Weryfikuj . Gdy polecenie „weryfikuj” nie powiedzie się, Selenium IDE rejestruje ten błąd i kontynuuje wykonywanie testu.
  • WaitFor . Przed przejściem do następnego polecenia, polecenia „waitFor” będą najpierw czekać, aż określony warunek stanie się prawdziwy.
    • Jeśli warunek zostanie spełniony w okresie oczekiwania, krok przechodzi.
    • Jeśli warunek nie zostanie spełniony, krok zakończy się niepowodzeniem. Błąd jest rejestrowany, a wykonanie testu przechodzi do następnego polecenia.
    • Domyślnie wartość limitu czasu jest ustawiona na 30 sekund. Możesz to zmienić w oknie dialogowym Selenium IDE Options na karcie General.

Assert vs. Verify

Wspólne polecenia

Komenda Liczba parametrów Opis
otwarty 0 - 2

Otwiera stronę za pomocą adresu URL.

click / clickAndWait 1

Klika określony element.

type / typeKeys 2

Wpisuje sekwencję znaków.

verifyTitle / assertTitle 1

Porównuje rzeczywisty tytuł strony z oczekiwaną wartością.

verifyTextPresent 1

Sprawdza, czy na stronie znajduje się określony tekst.

verifyElementPresent 1

Sprawdza obecność określonego elementu.

verifyTable 2

Porównuje zawartość tabeli z oczekiwanymi wartościami.

waitForPageToLoad 1

Wstrzymuje wykonywanie do momentu całkowitego załadowania strony.

waitForElementPresent 1

Wstrzymuje wykonywanie do momentu, gdy określony element stanie się obecny.

Utwórz skrypt ręcznie za pomocą programu Firebug

Teraz musimy ręcznie odtworzyć ten sam przypadek testowy, wpisując polecenia. Tym razem będziemy musieli użyć Firebuga.

Krok 1
  • Otwórz Firefox i Selenium IDE.
  • Wpisz podstawowy adres URL (http://demo.guru99.com/test/newtours/).
  • Przycisk nagrywania powinien być WYŁĄCZONY.
Krok 2: Kliknij najwyższą pustą linię w edytorze.

Wpisz „otwórz” w polu tekstowym Polecenia i naciśnij Enter.

Krok 3
  • Przejdź w Firefoksie do naszego podstawowego adresu URL i aktywuj Firebug
  • W panelu Selenium IDE Editor wybierz drugą linię (wiersz poniżej polecenia „otwórz”) i utwórz drugie polecenie, wpisując „assertTitle” w polu poleceń.
  • Zapraszam do korzystania z funkcji autouzupełniania.
Krok 4
  • W Firebug rozwiń tag , aby wyświetlić tag .</li> <li>Kliknij wartość tagu <title> (czyli „Welcome: Mercury Tours”) i wklej ją w polu Target w Edytorze.</li> </ul> </td> </tr> <tr> <td><strong>Krok 5</strong> <ul> <li>Aby utworzyć trzecie polecenie, kliknij trzecią pustą linię w Edytorze i wpisz „typ” w polu tekstowym Polecenie.</li> <li>W Firebug kliknij przycisk „Sprawdź”.</li> </ul> </td> </tr> <tr> <td>Kliknij pole tekstowe Nazwa użytkownika. Zauważ, że Firebug automatycznie wyświetla kod HTML dla tego elementu.</td> </tr> <tr> <td><strong>Krok 6</strong> <p>Zwróć uwagę, że pole tekstowe Nazwa użytkownika nie ma identyfikatora, ale ma atrybut NAZWA. Będziemy zatem używać jego NAZWY jako lokalizatora. Skopiuj wartość NAME i wklej ją do pola Target w Selenium IDE.</p> <p>Nadal w polu tekstowym Target przedrostek „nazwa_użytkownika” przedrostkiem „nazwa =”, co oznacza, że ​​Selenium IDE powinno być skierowane na element, którego atrybut NAME to „nazwa_użytkownika”.</p> <p>Wpisz „invalidUN” w polu tekstowym Wartość w Selenium IDE. Twój skrypt testowy powinien teraz wyglądać jak na poniższym obrazku. Skończyliśmy z trzecim poleceniem. Uwaga: Zamiast invalidUN, możesz wprowadzić dowolny inny ciąg tekstowy. Ale Selenium IDE rozróżnia wielkość liter i wpisujesz wartości / atrybuty dokładnie tak, jak w aplikacji.</p> </td> </tr> <tr> <td><strong>Krok 7</strong> <ul> <li>Aby utworzyć czwarte polecenie, wpisz „typ” w polu tekstowym Polecenie.</li> <li>Ponownie użyj przycisku „Sprawdź” Firebuga, aby uzyskać lokalizator pola tekstowego „Hasło”.</li> </ul> <ul> <li> <p>Wklej atrybut NAZWA („hasło”) do pola docelowego i poprzedz go ciągiem „nazwa =”</p> </li> <li> <p>Wpisz „invalidPW” w polu Wartość w Selenium IDE. Twój skrypt testowy powinien teraz wyglądać jak na poniższym obrazku.</p> </li> </ul> </td> </tr> <tr> <td><strong>Krok 8</strong> <ul> <li>W przypadku piątego polecenia wpisz „clickAndWait” w polu tekstowym Polecenie w środowisku Selenium IDE.</li> <li>Użyj przycisku „Sprawdź” Firebuga, aby uzyskać lokalizator przycisku „Zaloguj się”.</li> </ul> <ul> <li>Wklej wartość atrybutu NAZWA („login”) do pola tekstowego Cel i poprzedz go ciągiem „nazwa =”.</li> <li>Twój skrypt testowy powinien teraz wyglądać jak na poniższym obrazku.</li> </ul> </td> </tr> </tbody> </table> <p><strong>Krok 9:</strong> Zapisz przypadek testowy w taki sam sposób, jak zrobiliśmy w poprzedniej sekcji.</p> <a id="menu-6"></a> <h2>Korzystanie z przycisku Znajdź</h2> <p><strong>Przycisk Znajdź w Selenium IDE służy do sprawdzenia, czy to, co umieściliśmy w polu tekstowym Target, jest rzeczywiście poprawnym elementem interfejsu użytkownika.</strong></p> <p>Skorzystajmy z przypadku testowego Invalid_login, który stworzyliśmy w poprzednich sekcjach. Kliknij dowolną komendę z pozycją Cel, powiedzmy trzecią komendą.</p> <p>Kliknij przycisk Znajdź. Zwróć uwagę, że pole tekstowe Nazwa użytkownika na stronie Mercury Tours zostanie podświetlone na sekundę.</p> <p>Oznacza to, że Selenium IDE było w stanie poprawnie wykryć i uzyskać dostęp do oczekiwanego elementu. Jeśli przycisk Znajdź podświetlił inny element lub nie podświetlił go wcale, oznacza to, że coś jest nie tak z Twoim skryptem.</p> <a id="menu-7"></a> <h2>Wykonaj polecenie</h2> <p><strong>Pozwala to na wykonanie dowolnego polecenia bez uruchamiania całego przypadku testowego</strong> . Po prostu kliknij linię, którą chcesz wykonać, a następnie kliknij „Działania> Wykonaj to polecenie” na pasku menu lub po prostu naciśnij „X” na klawiaturze.</p> <p><strong>Krok 1.</strong> Upewnij się, że Twoja przeglądarka znajduje się na stronie głównej Mercury Tours. Kliknij polecenie, które chcesz wykonać. W tym przykładzie kliknij wiersz „typ | nazwa_użytkownika | nieprawidłowyUN”.</p> <p><strong>Krok 2.</strong> Naciśnij „X” na klawiaturze.</p> <p><strong>Krok 3.</strong> Zwróć uwagę, że pole tekstowe nazwy użytkownika zostanie wypełnione tekstem „invalidUN”</p> <p><strong>Wykonywanie poleceń w ten sposób zależy w dużym stopniu od strony, którą Firefox aktualnie wyświetla</strong> . Oznacza to, że jeśli wypróbujesz powyższy przykład ze stroną główną Google wyświetloną zamiast Mercury Tours ', twój krok nie powiedzie się, ponieważ na stronie głównej Google nie ma pola tekstowego z atrybutem „nazwa_użytkownika”.</p> <a id="menu-8"></a> <h2>Punkt startu</h2> <p><strong>Punkt początkowy to wskaźnik, który informuje Selenium IDE, w których wierszach rozpocznie się wykonanie</strong> . <strong>Jego klawisz skrótu to „S”.</strong></p> <p>W powyższym przykładzie odtwarzanie rozpocznie się w trzeciej linii (wpisz | hasło | nieprawidłowyPW). <strong>W jednym skrypcie testowym możesz mieć tylko jeden punkt początkowy.</strong></p> <p>Punkt początkowy jest podobny do polecenia Wykonaj polecenie, ponieważ jest zależny od aktualnie wyświetlanej strony. Punkt początkowy nie powiedzie się, jeśli jesteś na niewłaściwej stronie.</p> <a id="menu-9"></a> <h2>Punkty przerwania</h2> <p>Punkty przerwania to wskaźniki, które informują Selenium IDE, gdzie automatycznie wstrzymać test. <strong>Klawisz skrótu to „B”.</strong></p> <p>Żółte podświetlenie oznacza, że ​​bieżący krok jest w toku. Dowodzi to, że Selenium IDE wstrzymało wykonywanie na tym kroku. <strong>W jednym przypadku testowym możesz mieć wiele punktów przerwania.</strong></p> <a id="menu-10"></a> <h2>Krok</h2> <p>Pozwala na wykonywanie kolejnych poleceń pojedynczo po wstrzymaniu przypadku testowego. Skorzystajmy ze scenariusza z poprzedniej sekcji „Punkty przerwania”.</p> <table> <tbody> <tr> <td width="50%"> </td> <td> <p><strong>Przed kliknięciem „Krok”.</strong></p> <p>Przypadek testowy zatrzymuje się w wierszu „clickAndWait | login”.</p> </td> </tr> <tr> <td width="50%"> </td> <td> <p><strong>Po kliknięciu „Krok”.</strong></p> <p>Wiersz „clickAndWait | login” jest uruchamiany i zatrzymuje się na następnym poleceniu (verifyTitle | Sign-on: Mercury Tours).</p> <p>Zauważ, że następna linia jest wstrzymana, mimo że nie ma tam punktu przerwania. Jest to główny cel funkcji Step - wykonuje kolejne polecenia pojedynczo, aby dać Ci więcej czasu na sprawdzenie wyniku po każdym kroku.</p> </td> </tr> </tbody> </table> <a id="menu-11"></a> <h2>Ważne rzeczy, o których należy pamiętać podczas używania innych formatów w widoku źródła</h2> <p><strong>Selenium IDE działa dobrze tylko z HTML - inne formaty są nadal w trybie eksperymentalnym</strong> . To <strong>nie jest wskazane</strong> , aby utworzyć lub edytować testy przy użyciu innych formatów w tekst źródłowy, ponieważ jest jeszcze wiele pracy potrzeba, aby to stabilne. Poniżej znajdują się znane błędy z wersji 1.9.1.</p> <ul> <li>Nie będziesz w stanie odtworzyć ani przełączyć się z powrotem do widoku tabeli, chyba że powrócisz do HTML.</li> <li>Jedynym sposobem na bezpieczne dodawanie poleceń do kodu źródłowego jest ich nagranie.</li> <li>Gdy ręcznie zmodyfikujesz kod źródłowy, wszystko to zostanie utracone po przełączeniu się na inny format.</li> <li>Chociaż możesz zapisać swój przypadek testowy w widoku źródła, Selenium IDE nie będzie w stanie go otworzyć.</li> </ul> <p><strong>Zalecanym sposobem konwersji testów Selenese jest użycie opcji „Eksportuj przypadek testowy jako…” w menu Plik, a nie w widoku źródła.</strong></p> <a id="menu-12"></a> <h2>Podsumowanie</h2> <ul> <li>Skrypty testowe można tworzyć poprzez nagrywanie lub ręczne wpisywanie poleceń i parametrów.</li> <li>Podczas ręcznego tworzenia skryptów do pobrania lokalizatora używany jest Firebug.</li> <li>Przycisk Znajdź służy do sprawdzenia, czy polecenie ma dostęp do właściwego elementu.</li> <li>Widok tabeli wyświetla skrypt testowy w formie tabelarycznej, podczas gdy widok źródła wyświetla go w formacie HTML.</li> <li>Zmiana widoku źródła na format inny niż HTML jest nadal eksperymentalna.</li> <li>Nie używaj widoku źródła do tworzenia testów w innych formatach. Zamiast tego użyj funkcji eksportu.</li> <li>Parametry nie są wymagane przez cały czas. To zależy od polecenia.</li> <li>Istnieją trzy rodzaje poleceń:</li> <ul> <li>Akcje - bezpośrednio współdziała z elementami strony</li> <li>Accessors - „czyta” właściwość elementu i zapisuje ją w zmiennej</li> <li>Assertions - porównuje rzeczywistą wartość z oczekiwaną</li> </ul> <li>Asercje mają trzy typy:</li> <ul> <li>Assert - w przypadku niepowodzenia kolejne kroki nie są już wykonywane</li> <li>Weryfikuj - w przypadku niepowodzenia kolejne kroki są nadal wykonywane.</li> <li>WaitFor - przechodzi, jeśli określony warunek stanie się prawdziwy w określonym czasie; w przeciwnym razie nie powiedzie się</li> </ul> <li>Najpopularniejsze polecenia to:</li> <ul> <li>otwarty</li> <li>click / clickAndWait</li> <li>type / typeKeys</li> <li>verifyTitle / assertTitle</li> <li>verifyTextPresent</li> <li>verifyElementPresent</li> <li>verifyTable</li> <li>waitForPageToLoad</li> <li>waitForElementPresent</li> </ul> </ul> </div> </article> <div id="container-5533149ee6411a5f99b370c693e87966"></div> </div> </div> </div> </div> </div> <aside class="col-lg-4 sidebar sidebar--right"> <div class="widget widget-popular-posts"> <h2 class="widget-title">Popularne Wiadomości</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003189-016-home-navigation-part-2" title="# 016 - Nawigacja główna, część 2 - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/2546972/016_-_home_navigation-_part_2_css-tricks.png.webp" loading="lazy" alt="# 016 - Nawigacja główna, część 2 - CSS-Tricks" title="# 016 - Nawigacja główna, część 2 - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003189-016-home-navigation-part-2" title="# 016 - Nawigacja główna, część 2 - CSS-Tricks" rel="bookmark"># 016 - Nawigacja główna, część 2 - CSS-Tricks 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003190-018-footer" title="# 018 - Stopka - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/2455689/018_-_footer_css-tricks.png.webp" loading="lazy" alt="# 018 - Stopka - CSS-Tricks" title="# 018 - Stopka - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003190-018-footer" title="# 018 - Stopka - CSS-Tricks" rel="bookmark"># 018 - Stopka - CSS-Tricks 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003191-019-the-blog-part-1" title="# 019 - Blog, część 1 - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/6480635/019_-_the_blog-_part_1_css-tricks.png.webp" loading="lazy" alt="# 019 - Blog, część 1 - CSS-Tricks" title="# 019 - Blog, część 1 - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003191-019-the-blog-part-1" title="# 019 - Blog, część 1 - CSS-Tricks" rel="bookmark"># 019 - Blog, część 1 - CSS-Tricks 2025</a></h3> </div> </div> </li> </ul> </div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Najlepsze opinii o miesiąc</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004008-zero-padded-numbers" title="Cyfry zerowe - CSS-Tricks" rel="bookmark">Cyfry zerowe - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004009-advanced-type-checking" title="Zaawansowane sprawdzanie typów - CSS-Tricks" rel="bookmark">Zaawansowane sprawdzanie typów - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004010-black-and-white-opacity-functions" title="Funkcje krycia czarno-białego - CSS-Tricks" rel="bookmark">Funkcje krycia czarno-białego - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004011-caching-the-current-selector-and-in-sass" title="Buforowanie bieżącego selektora (&) w Sass - CSS-Tricks" rel="bookmark">Buforowanie bieżącego selektora (&) w Sass - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004012-bem-mixins" title="Miksery BEM - CSS-Tricks" rel="bookmark">Miksery BEM - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004013-covering-mixin" title="Pokrycie Mixin - CSS-Tricks" rel="bookmark">Pokrycie Mixin - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004014-clamping-a-number" title="Zaciskanie numeru - CSS-Tricks" rel="bookmark">Zaciskanie numeru - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004015-correctly-adding-unit-to-number" title="Prawidłowe dodawanie jednostki do numeru - CSS-Tricks" rel="bookmark">Prawidłowe dodawanie jednostki do numeru - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004016-centering-mixin" title="Centrowanie Mixin - CSS-Tricks" rel="bookmark">Centrowanie Mixin - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004017-css-triangle-mixin" title="Mieszanie trójkątów CSS - CSS-Tricks" rel="bookmark">Mieszanie trójkątów CSS - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004018-custom-scrollbars-mixin" title="Niestandardowe paski przewijania Mixin - CSS-Tricks" rel="bookmark">Niestandardowe paski przewijania Mixin - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004019-deep-getset-in-maps" title="Deep Get / Set w Mapach - CSS-Tricks" rel="bookmark">Deep Get / Set w Mapach - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004020-easing-map-get-function" title="Funkcja łatwego pobierania mapy - CSS-Tricks" rel="bookmark">Funkcja łatwego pobierania mapy - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004021-fix-a-number-to-n-digits" title="Napraw liczbę na N cyfr - CSS-Tricks" rel="bookmark">Napraw liczbę na N cyfr - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004022-extend-wrapper-a-k-a-mixtend" title="@extend Wrapper aka Mixtend - CSS-Tricks" rel="bookmark">@extend Wrapper aka Mixtend - CSS-Tricks</a></h3> </div> </div> </li> </ul> </div> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Najpopularniejsze Artykuły</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8004092-loginlogout-and-user-welcome" title="Logowanie / wylogowanie i powitanie użytkownika - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/3489348/loginlogout_and_user_welcome_css-tricks.png.webp" loading="lazy" alt="Logowanie / wylogowanie i powitanie użytkownika - CSS-Tricks" title="Logowanie / wylogowanie i powitanie użytkownika - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004092-loginlogout-and-user-welcome" title="Logowanie / wylogowanie i powitanie użytkownika - CSS-Tricks" rel="bookmark">Logowanie / wylogowanie i powitanie użytkownika - CSS-Tricks 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8004093-list-posts-highlight-current" title="Lista postów, zaznacz bieżące - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/7345267/list_posts-_highlight_current_css-tricks.png.webp" loading="lazy" alt="Lista postów, zaznacz bieżące - CSS-Tricks" title="Lista postów, zaznacz bieżące - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004093-list-posts-highlight-current" title="Lista postów, zaznacz bieżące - CSS-Tricks" rel="bookmark">Lista postów, zaznacz bieżące - CSS-Tricks 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8004094-include-jquery-in-wordpress-theme" title="Uwzględnij jQuery w motywie WordPress - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/4455615/include_jquery_in_wordpress_theme_css-tricks.png.webp" loading="lazy" alt="Uwzględnij jQuery w motywie WordPress - CSS-Tricks" title="Uwzględnij jQuery w motywie WordPress - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004094-include-jquery-in-wordpress-theme" title="Uwzględnij jQuery w motywie WordPress - CSS-Tricks" rel="bookmark">Uwzględnij jQuery w motywie WordPress - CSS-Tricks 2025</a></h3> </div> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer footer--dark"> <div class="container"> <div class="footer__widgets"> <div class="row"> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Popularne Wiadomości</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225129-postgresql-vs-mysql-whats-the-difference" title="PostgreSQL vs MySQL: jaka jest różnica?" rel="bookmark">PostgreSQL vs MySQL: jaka jest różnica?</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225132-how-to-print-in-python-with-examples" title="Jak drukować w Pythonie z przykładami" rel="bookmark">Jak drukować w Pythonie z przykładami</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225133-hello-world-create-your-first-python-program" title="Hello World: Stwórz swój pierwszy program w Pythonie" rel="bookmark">Hello World: Stwórz swój pierwszy program w Pythonie</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225135-python-tuple-pack-unpack-compare-slicing-delete-key" title="Python TUPLE - pakowanie, rozpakowywanie, porównywanie, krojenie, usuwanie, klucz" rel="bookmark">Python TUPLE - pakowanie, rozpakowywanie, porównywanie, krojenie, usuwanie, klucz</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225136-python-dictionary-append-how-to-add-keyvalue-pair" title="Dołączanie do słownika Pythona: jak dodać parę klucz / wartość" rel="bookmark">Dołączanie do słownika Pythona: jak dodać parę klucz / wartość</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Wybór Redakcji</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225671-how-to-make-balance-sheet-with-example" title="Jak zrobić bilans na przykładzie" rel="bookmark">Jak zrobić bilans na przykładzie</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225672-20-best-small-business-accounting-software-in-usa-2021" title="20 NAJLEPSZYCH programów księgowych dla małych firm w USA (2021)" rel="bookmark">20 NAJLEPSZYCH programów księgowych dla małych firm w USA (2021)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225673-65-best-accounting-courses-in-2021" title="65 najlepszych kursów księgowych w 2021 r" rel="bookmark">65 najlepszych kursów księgowych w 2021 r</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225675-20-best-free-quickbooks-alternatives-in-2021" title="20 najlepszych DARMOWYCH alternatyw QuickBooks w 2021 roku" rel="bookmark">20 najlepszych DARMOWYCH alternatyw QuickBooks w 2021 roku</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225676-accounting-pdf-beginners-bookkeeping-download-now" title="Księgowy PDF: Księgowość dla początkujących (Pobierz teraz)" rel="bookmark">Księgowy PDF: Księgowość dla początkujących (Pobierz teraz)</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Najpopularniejsze Artykuły</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225187-python-remove-duplicates-from-a-list" title="Python usuwa duplikaty z listy" rel="bookmark">Python usuwa duplikaty z listy</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225188-remove-element-from-a-python-list-clear-pop-remove-del" title="Usuń element z LISTY Pythona (wyczyść, wyskocz, usuń, usuń)" rel="bookmark">Usuń element z LISTY Pythona (wyczyść, wyskocz, usuń, usuń)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225189-python-list-index-with-example" title="Python List index () z przykładem" rel="bookmark">Python List index () z przykładem</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225190-python-internet-access-using-urllib-request-and-urlopen" title="Dostęp do Internetu w Pythonie przy użyciu Urllib.Request i urlopen ()" rel="bookmark">Dostęp do Internetu w Pythonie przy użyciu Urllib.Request i urlopen ()</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225191-python-xml-parser-tutorial-read-xml-file-exampleminidom-elementtree" title="Python XML Parser Tutorial: Przeczytaj przykład pliku xml (Minidom, ElementTree)" rel="bookmark">Python XML Parser Tutorial: Przeczytaj przykład pliku xml (Minidom, ElementTree)</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright pl.css-code.org, 2025 Kwiecień | <a href="https://pl.css-code.org/about-site" title="O stronie">O stronie</a> | <a href="https://pl.css-code.org/contacts" title="Łączność">Łączność</a> | <a href="https://pl.css-code.org/privacy-policy" title="Polityka prywatności">Polityka prywatności</a>. </p> </div> </div> </footer> <link href="https://css-code.org/template/css/style.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" /> </body> </html>