7 opcji przeglądarki Chrome, niezbędnych przy automatyzacji testów

W jednym z pierwszych projektów, w których pracowałem, klient zlecił mi sprawdzenie działania funkcji skanującej kody QR. Funkcja polegała na tym, że użytkownik prezentował wydrukowany kod QR, który następnie serwis odczytywał przez kamerę internetową.

Na szczęście test okazał się możliwy do zautomatyzowania, dzięki opcjom wbudowanym w przeglądarkę Chrome.

W tym artykule pokażę Ci jak to zrobić i przedstawię kilka innych opcji przeglądarki Chrome, które powinien znać każdy tester automatyk. Dostępne opcje pokażę na przykładzie Protractora jednak podobnie możesz skorzystać z nich także przy użyciu Selenium WebDriver.

Przeglądarkę Chrome, możesz dostosować do swoich potrzeb niezależnie od tego, w jakim języku piszesz testy. Jest to uzupełnienie interfejsu Capabilities udostępnianego standardowo przez WebDriver’a.

Poniżej przykład implementacji w środowisku JavaScript/TypeScript i narzędzia Protractor:

config.capabilities = {
 browserName: 'chrome',
 chromeOptions: {
   args: ['--window-size=1600,900'],
   prefs: {
     'plugins.always_open_pdf_externally': true,
     "download": {
       "prompt_for_download": false,
       "default_directory": process.cwd() + "/tmp"
     },
   }
 },

W innych językach sposób konfiguracji może się nieco różnić, ale opisywane dalej parametry pozostaną takie same. Więcej informacji na ten temat możecie znaleźć na stronie domowej ChromeDriver’a [1].

Parametr args umożliwia przekazanie listy argumentów umożliwiających konfigurację przeglądarki z linii poleceń przy jej starcie. Są to te same parametry, które użytkownik może wykorzystać przy uruchamianiu przeglądarki z konsoli.

Parametr prefs określa preferencje związane z profilem użytkownika. Czyli wszystkie te opcje, które można znaleźć w ustawieniach Chrome (dostępnych po wpisaniu chrome://settings w pasku URL) jak i inne bardziej szczegółowe parametry.

Niestety trudno znaleźć oficjalne źródło informacji na temat wszystkich argumentów dostępnych z linii poleceń jak i ustawień profilu. W referencjach umieszczonych na końcu artykułu znajdziecie kilka przydatnych stron, które je opisują. Warto też zajrzeć do pliku „Preferencje” w katalogu danych użytkownika Chrome, w którym można podejrzeć ustawienia profilu.

Oto najczęściej wykorzystywane przeze mnie ustawienia:

1.  Jak ustawić wielkość okna?

window-size (argument)

Rozmiar okna określamy przez podanie wartości wysokości i szerokości w pikselach.

config.capabilities = {
 browserName: 'chrome',
 chromeOptions: {
   args: ['--window-size=1600,900']
   }
 },

2. Jak ściągnąć plik do wybranego folderu?

default_directory (preferencja)

Opcja do której przypisujemy ścieżkę w formacie ‘String’ – do miejsca, gdzie chcemy, aby ściągały się pliki. Wymagana jest pełna ścieżka (absolute path). W tym celu w przykładzie wykorzystujemy ‘process.cwd()’. cwd – jest to metoda obiektu `process`, która zwraca wartość w postaci ‘String’ z aktualnym katalogiem procesu Node.js.

config.capabilities = {
 browserName: 'chrome',
 chromeOptions: {
   prefs: {
     "download": {
       "default_directory": process.cwd() + "/tmp"
     }
   }
 },

3. Jak ominąć monit przy ściąganiu?

prompt_for_download (preferencja)

Opcja pozwala określić, czy chcemy, aby pojawiał się pop-up od przeglądarki pytający “czy chcemy ściągnąć plik”. Przyjmowana jest wartość typu Boolean.

True – okienko będzie się pojawiać
False – pliki będą się ściągać automatycznie.

config.capabilities = {
 browserName: 'chrome',
 chromeOptions: {
   prefs: {
     "download": {
       "prompt_for_download": false,
     }
   }
 },

4. Jak ściągnąć pdf bez otwierania?

plugins.always_open_pdf_externally (preferencja)

Opcja decyduje o tym, czy pdf będzie ściągnięty, czy też otworzony w przeglądarce. Podczas ściągania plików pdf zazwyczaj są one najpierw wyświetlane/otwierane w przeglądarce. Można pominąć ten krok podając wartość ‘true’. Innymi słowy, pdf się ściągnie jak zwykły plik zamiast od razu otwierać.

config.capabilities = {
 browserName: 'chrome',
 chromeOptions: {
   prefs: {
     'plugins.always_open_pdf_externally': true,
   }
 },

5. Jak wyłączyć notyfikacje?

profile.managed_default_content_settings.notifications (preferencja)

Niektóre strony proszą użytkownika o u dzielenie dostępu na notyfikacje. Np:

Opcja ta pozwala nam obsłużyć notyfikacje. Podając wartość liczbową: 1 – automatycznie zezwalamy lub 2 – blokujemy. Warto pamiętać, że jedna i druga opcja sprawia, że notyfikacja się nie wyświetli.

config.capabilities = {
 browserName: 'chrome',
 chromeOptions: {
   prefs: {
     'profile.managed_default_content_settings.notifications': 1,
   }
 },

6. Jak uruchomić chrome w trybie headless?

Tryb ‘headless’ oznacza, że przeglądarkę możemy uruchomić bez graficznego interfejsu (GUI). Przeglądarka z tą opcją pozwala wygenerować i obsłużyć HTML tak jak normalna przeglądarka, natomiast nie obciąża dodatkowo zasobów procesora aby wyświetlić obraz na monitorze. Tryb ten nie przeszkadza też w zapisywaniu zrzutów ekranu w testach.

config.capabilities = {
 browserName: 'chrome',
 chromeOptions: {
   args: ['--headless']
   }
 },

Często opcję ‘–headless’ możemy spotkać w towarzystwie argumentu ‘–disable-gpu’. Było to spowodowane błędem samego Chroma: https://bugs.chromium.org/p/chromium/issues/detail?id=737678

Warto dodać, że w trybie headless, mimo, iż zaimplementowanym już dość dawno, można spodziewać się problemów z pewnymi testami (np. upload plików).

7. Jak zasymulować korzystanie z kamery?

Znacie już najważniejsze sześć parametrów jakie powinien znać każdy tester. Omówię jeszcze jeszcze trzy dodatkowe parametry, które wykorzystywałem w projekcie opisanym we wstępie. Przypomnę, że musiałem w nim zasymulować odczytanie kodu QR przy pomocy kamerki internetowej.

"chromeOptions": {
      "args": [
            "--use-fake-device-for-media-stream",
            "--use-fake-ui-for-media-stream",
            "--use-file-for-fake-video-capture=./tmp/QRcodeToScan.y4m"
      ],

use-fake-ui-for-media-stream (argument)

opcja pozwala ominąć potrzebę przyznania zezwolenia do użycia kamery/mikrofonu

use-fake-device-for-media-stream (argument)

opcja podaje wzór testowy do metody getUserMedia() zamiast czytać obraz na żywo z kamery. Dzięki temu jesteśmy w stanie wyświetlić plik filmowy w oknie, w którym normalnie byłby obraz z naszej kamery.

use-file-for-fake-video-capture=./yourFile.y4m (argument)

ostatnią opcją jest podanie ścieżki do pliku, który ma się wyświetlić na obrazie kamery. Film musi mieć rozszerzenie .y4m

Poniższy obraz pokazuje przykładowe wykorzystanie tych opcji na stronie appear.io, gdzie w miejsce przesyłanego standardowo obrazu z naszej kamery, został przesłany film z kodem QR. Gdyby w tym miejscu znajdowała się funkcjonalność do skanowania kodu, to film zostałby zeskanowany.

W projekcie pojawiła się też kwestia stworzenia takiego kodu QR w formie pliku filmowego ale to już temat na inny artykuł.

Zachęcam Was do przejrzenia referencji jakie zamieszczam poniżej jak również nadsyłania własnych ciekawych rozwiązań.

Przypisy:
[1] http://chromedriver.chromium.org/capabilities
[2] https://peter.sh/experiments/chromium-command-line-switches/
[3] http://www.assertselenium.com/java/list-of-chrome-driver-command-line-arguments/
[4] https://chromium.googlesource.com/chromium/src/+/7e762c1f17514a29834506860961ba2f24e7e6e5/components/content_settings/core/common/pref_names.cc

Rafał Szmit

Software Tester

Absolwent studiów informatycznych Politechniki Łódzkiej. Tester z rocznym doświadczeniem. Od dnia pierwszego ukierunkowany na automatyzację oraz testy wydajnościowe. Aktualnie realizuje projekty, w których codzienne wykorzystuje i poszerza swoją wiedzę.

Jacek Okrojek

Test Automation Lead

Tester, koordynator i kierownik testów z wieloletnim doświadczeniem w testowaniu systemów wysokiej dostępności. Pracował w obszarze testów integracyjnych, wydajnościowych oraz akceptacyjnych. Autor rozwiązań automatyzujących proces testowania oprogramowania. Współpracuje z Uniwersytetem Łódzkim, na którym prowadzi zajęcia z testowania oprogramowania.