Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung des automatisierten Testens der Nachtwache in js

青灯夜游
Freigeben: 2018-10-17 14:52:01
nach vorne
3016 Leute haben es durchsucht

Dieser Artikel führt Sie in das automatisierte Testen der Nachtwache in js ein, damit Sie die Methode des automatischen Testens der Nachtwache beherrschen können. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

nightwatch.js ist ein Web-UI-Framework für automatisierte Tests, das tief in vue-cli integriert ist. Wenn ein Projekt auf Basis von vue-cli erstellt wird, kann es grundsätzlich sofort verwendet werden.

Aber wir können vue-cli nicht ständig verwenden. Weil es unsere individuellen Bedürfnisse oft nicht erfüllen kann. Oftmals passen wir das Build-Framework an oder erstellen es komplett neu. Zu diesem Zeitpunkt wird es schwierig sein, die Nachtwache zu integrieren. Dieser Artikel hilft Ihnen beim Einstieg in den Aufbau eines solchen Test-Frameworks.

Erforderliche Umgebung

Installieren Sie zunächst Nightwatch im Projekt und wechseln Sie in das Projektverzeichnis.

npm intall nightwatch -D
Nach dem Login kopieren

Dies zu installieren reicht nicht aus, Sie müssen auch Selenium-Server installieren, was möglich ist kann auch mit npm installiert werden

npm install selenium-server -D
Nach dem Login kopieren

Selenium-Server ist auf Java-Basis entwickelt und wird zur Verbindung mit dem Browser verwendet. Sie müssen also Java installieren, bevor Sie Selenium-Server installieren. Wie installiere ich Java?

Darüber hinaus müssen Sie auch einen Browsertreiber installieren. Im Allgemeinen verwenden wir Chrome zum Testen

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedrive -D
Nach dem Login kopieren

Wenn Sie chromedriver direkt installieren, werden Sie aufgefordert, die Installation durchzuführen erfolglos und Sie müssen die Spiegeladresse manuell angeben

Jetzt wurden die Teile heruntergeladen, die heruntergeladen werden müssen.

Projektkonfiguration

Nightwatch verwendet standardmäßig das nightwatch.conf.js im Projektstammverzeichnis als Konfigurationsdatei. Auf der offiziellen Website gibt es auch ein anderes Konfigurationsdateiformat: nightwatch.json. Hier verwenden wir die js-Konfigurationsmethode, da das Format flexibler ist.

Das Folgende ist eine einfache Konfigurationsdatei.

module.exports = {
    'src_folders': [
        'e2e/case'
    ],
    'output_folder': 'reports',
    'custom_commands_path': '',
    'custom_assertions_path': '',
    'page_objects_path': '',
    'globals_path': require('./e2e/config/global.config').path,
    'selenium': {
        'start_process': true,
        'server_path': require('selenium-server').path,
        'log_path': '',
        'host': '127.0.0.1',
        'port': 4444,
        'cli_args': {
            'webdriver.chrome.driver': require('chromedriver').path
        }
    },
    'test_settings': {
        'default': {
            'launch_url': 'http://localhost',
            'selenium_port': 4444,
            'selenium_host': 'localhost',
            'silent': true,
            'screenshots': {
                'enabled': false,
                'path': ''
            },
            'desiredCapabilities': {
                'browserName': 'chrome',
                'marionette': true
            }
        },
        'chrome': {
            'desiredCapabilities': {
                'browserName': 'chrome'
            }
        },
        'edge': {
            'desiredCapabilities': {
                'browserName': 'MicrosoftEdge'
            }
        }
    }
}
Nach dem Login kopieren

src_folders: stellt den Ordner dar, in dem sich der Fall befindet

output_folder: stellt den Ordner für die Berichtsausgabe dar

server_path unter Selenium: stellt Selenium-Server dar Der Installationspfad

start_process unter Selenium: Gibt an, ob Selenium-Server automatisch gestartet werden soll. Wenn die Investition auf „false“ gesetzt ist, wird der Server nicht automatisch gestartet.

"cli_args" : {
      "webdriver.chrome.driver" : "",
      "webdriver.gecko.driver" : "",
      "webdriver.edge.driver" : ""
    }
Nach dem Login kopieren

Der Treiber unter cli_args stellt den Installationspfad mehrerer Treiber dar.

test_settings sind die an die Nightwatch-Instanz übergebenen Daten Es ist notwendig, andere Umgebungen können Sie selbst vorbereiten.

nightwatch --env default
Nach dem Login kopieren

Dann führen wir den obigen Befehl im Projekt aus.

Ich habe einen Fehler in Windows gefunden und konnte ihn nicht ausführen. Wir müssen

"scripts": {
    "e2e": "nightwatch --env default",
  },
Nach dem Login kopieren

unter package.json konfigurieren, damit es normal ausgeführt werden kann.

Wenn Sie den tatsächlichen Effekt sehen möchten, können wir einfach einige Fälle im Fallordner erstellen

Zum Beispiel:

module.exports = {
    'Test login': function (browser) {
        browser
            .windowMaximize()
            .url('https://trans.qa.17u.cn/saas')
            .waitForElementVisible('.login', 3000)
            .assert.urlContains('/saas/login')
    }
    
}
Nach dem Login kopieren

Zusammenfassung: Das Obige ist der gesamte Artikel Inhalt und Code sind sehr einfach, Sie können es ausprobieren. Ich hoffe, dass es für das Lernen aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial, jQuery-Video-Tutorial, Bootstrap-Tutorial!

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des automatisierten Testens der Nachtwache in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage