Dzisiaj gratka dla osób, które zaczynają swoją przygodę z Dockerem i chcą dockeryzować aplikacje z graficznym interfejsem użytkownika. Dzięki temu możemy wyświetlać na lokalnej maszynie interfejs aplikacji, która uruchamiona jest w kontenerze Dockera. Jako przykład zaprezentuję uruchamianie testów integracyjnych z wykorzystaniem narzędzia Cypress za pomocą komendy:

cypress open

Konfigurację będę pokazywał na przykładzie Dockera zainstalowanego na systemie Windows (Docker Desktop), aczkolwiek na innych systemach powinno to wyglądać bardzo podobnie.

Przygotowanie maszyny hosta

Aby wyświetlać interfejs z aplikacji uruchomionej w kontenerze Dockera wykorzystamy tzw. serwer X. Na Linuksie jest on już zainstalowany w systemie, natomiast w systemie Windows musimy go sobie doinstalować osobno. Testowałem dwie przykładowe implementacje: wbudowaną w narzędzie MobaXTerm oraz VcXsrv i polecam wykorzystanie tego drugiego (chociażby dlatego, że jest na licencji GPL). W tym celu pobieramy najpierw instalator ze strony narzędzia oraz go uruchamiamy. Podczas instalacji najlepiej nie modyfikować żadnych standardowych opcji.

Po zainstalowaniu uruchamiamy aplikację i przechodzimy przez wszystkie okna zostawiając opcje domyślnie zaznaczone. Tylko w ostatnim kroku zaznaczamy opcję Disable access control aby uniknąć problemów z uprawnieniami. Serwer jest teraz gotowy do działania.

Przygotowanie kontenera Dockera

Przygotujemy sobie bardzo proste środowisko testów z wykorzystaniem Cypress. W pierwszym kroku stworzymy pliki Dockerfile oraz docker-compose.yaml.

FROM cypress/base:14.15.0

WORKDIR /var/www/html

RUN npm install -g cypress
RUN cypress verify

Plik Dockefile zawiera instalację Cypress na gotowym obrazie - nie ma tu nic ciekawego do opowiedzenia. Natomiast spójrzmy na plik docker compose, tutaj jest jedna ważna konfiguracja:

version: '3'
services:
  cypress:
    build: .
    container_name: cypress
    volumes:
      - ./:/var/www/html/
    environment:
      - DISPLAY=192.168.1.106:0.0
    stdin_open: true
    tty: true

Kluczowym ustawieniem jest tutaj adres wskazujący na ekran, na którym ma zostać wyświetlony obraz oraz przekazanie go w postaci zmiennej środowiskowej. Składa się on z IP maszyny hosta oraz numeru monitora. IP maszyny można sobie pobrać za pomocą polecenia:

ipconfig

Natomiast numer monitora to ten skonfigurowany w serwerze X. Najprawdopodobniej będzie to 0.0, jeżeli nie zmieniałeś tej opcji podczas uruchomienia serwera.

Teraz dodajemy prostą konfigurację testów w pliku cypress.json:

{
  "baseUrl": "https://rombarte.pl",
  "integrationFolder": "tests/integration"
}

oraz sam test w pliku tests/integration/homepage.spec.js:

describe('Homepage', () => {
    context('Website health', () => {
        it('Homepage should load correctly', () => {
            cy.visit('/pl/');
        });
    });
});

Test jest trywialny (polega na odwiedzeniu mojej strony głównej), ale nie skupiamy się w tym wpisie na samym Cypressie.

W tak przygotowanym środowisku powinieneś móc uruchomić komendę docker-compose up -d i kontener powinien wystartować.

W celu sprawdzenia konfiguracji testów uruchomimy je najpierw w konsoli. Uruchamiamy polecenie:

docker-compose exec cypress cypress run

fraza cypress powtarza się nie przypadkowo. Ja widzimy test się uruchamia:

Teraz spróbujmy uruchomić Cypress w oknie z GUI:

docker-compose exec cypress cypress open

No i jak widzimy, uruchomiło się okno z panelem Cypress! Możemy w nim uruchomić testy:

Widzimy, że okno różni się od tych typowych okien systemu Windows i przypomina te z systemu Linux. Wynika to z tego, że okno tworzone jest w kontenerze, a wyświetlane po stronie maszyny hosta. W oknie możemy dowolnie manipulować elementami myszką oraz klawiaturą.

To na dzisiaj wszystko. Jak zawsze zachęcam do zabawy i do potestowania możliwości, jakie daje przedstawione rozwiązanie. Wszystkie niezbędne do odpalenia przykładu pliki możesz pobrać stąd.