Zum Hauptinhalt springen

Visuelle Tests

TestCafe erstellt einen Screenshot des angegebenen Elements und vergleicht ihn mit einem zuvor aufgenommenen Screenshot. Sie führen die Tests mit bestimmten Browsern durch.

Ausführen visueller Tests​

  1. Starten Sie Ihre App: 
    npm start
  2. Im Stammordner befindet sich eine „.env“-Datei, in der Sie eine URL für die zu testende Anwendung angeben können. Standardmäßig lautet der Wert DEPLOY_URL=localhost:3000. 
    export DEPLOY_URL='http://localhost:3000'
  3. Starten Sie die Tests: 
    npm run visual-tests
    Sie können auch den Browser auswählen: 
    npm run visual-tests -- --browser=safari
  4. Bereiten Sie den Bericht vor: 
    npm run prepare-visual-report
    Wenn Sie diesen Befehl ausführen, wird in Ihrem Browser eine Seite geöffnet, bevor der Bericht fertig ist. Nachdem die Ausführung des Befehls abgeschlossen ist, aktualisieren Sie die Seite, um den vollständigen Bericht zu erhalten.

Schreiben von visuellen Tests​

Die folgenden Hilfsprogrammmethoden für visuelle Tests sind im e2e-Tests-Paket von Jutro verfügbar:

import {
  takeScreenShot, // Takes a screenshot of the component
  getTestMetadata, // Searches for the metadata of the test
  matchImageSnapshot, // Checks if given screenshots are matching
  generateSingleTestReport, // Generates a test report
  verifyVisualSnapshot, // Takes a snapshot for the given selector and checks if it's matching with the previous
} from '@jutro/lab-preview-test-e2e';

In der Jutro-App finden Sie ein Beispiel für die Einrichtung eines einfachen visuellen Tests:

const getUrl = (url = '') => `${process.env.DEPLOY_URL}/${url}`;
const isVisible = (selector) => selector.with({ visibilityCheck: true }).exists;

fixture`Jutro App`.beforeEach(async () => {
  // use Testcafe Role initializer to login to or open your app (https://devexpress.github.io/testcafe/documentation/guides/advanced-guides/authentication.html)
  await openJutroApplication();
});

test('Codeless Form page', async (t) => {
  //  Testcafe selector (https://devexpress.github.io/testcafe/documentation/reference/test-api/selector/constructor.html)
  const codelessForm = screen.getByTestId('codeless-form');

  await t.navigateTo(getUrl()); // pass the page URL you want to test into the `getUrl` if needed
  await t.expect(isVisible(codelessForm)).ok(); // wait till the element on the page is visible

  // takes a visual snapshot for the selector and verifies if it matches with the previous one
  await verifyVisualSnapshot(t, codelessForm);
});

Verfolgung von visuellen Tests​

Wir verwenden Screenshots für den visuellen Vergleich von Webseiten. Es ist sehr wichtig, diese Screenshots in einer kontrollierten Umgebung aufzunehmen (mit demselben Browser, demselben Betriebssystem und derselben Bildschirmauflösung), da der Browser die Webseite auf verschiedenen Betriebssystemen und Bildschirmgrößen unterschiedlich rendert.

Um sicherzustellen, dass Ihre Tests konsistent sind, können Sie sie in Docker-Images ausführen.