Explication détaillée des tests automatisés de nightwatch en js

Cet article vous présentera les tests automatisés de nightwatch en js, afin que vous puissiez maîtriser la méthode de test automatisé de nightwatch. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

nightwatch.js est un framework de test automatisé d'interface utilisateur Web profondément intégré à vue-cli. Si un projet est construit sur la base de vue-cli, il peut essentiellement être utilisé directement.

Mais on ne peut pas utiliser vue-cli tout le temps. Parce qu’il ne peut souvent pas répondre à nos besoins personnalisés. Plusieurs fois, nous personnaliserons le cadre de construction ou le reconstruirons complètement. A cette époque, il sera difficile d’intégrer la veille nocturne. Cet article vous aidera à démarrer la création d'un tel cadre de test.

Environnement requis

Installez d'abord nightwatch dans le projet, passez au répertoire du projet

npm intall nightwatch -D

L'installer ne suffit pas, vous devez également installer Selenium-Server, qui peut également être utilisé pour l'installation npm

npm install selenium-server -D

selenium-server est développé sur la base de Java et est utilisé pour se connecter au navigateur. Vous devez donc installer Java avant d'installer Selenium-Server. Comment installer Java ?

De plus, vous devez également installer un pilote de navigateur. Généralement, nous utilisons Chrome pour les tests

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

Si vous installez directement Chromedriver, il vous demandera que le pilote soit installé. l'installation échoue et vous devez spécifier manuellement l'image

À ce stade, la partie qui doit être téléchargée a été téléchargée.

Configuration du projet

nightwatch utilise le nightwatch.conf.js dans le répertoire racine du projet comme fichier de configuration par défaut. Le site officiel propose également un autre format de fichier de configuration qui est nightwatch.json. Ici nous utilisons la méthode de configuration js car le format est plus flexible.

Ce qui suit est un simple fichier de configuration.

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'
            }
        }
    }
}

src_folders : représente le dossier où se trouve le dossier

output_folder : représente le dossier de sortie du rapport

server_path sous Selenium : représente Selenium -Chemin d'installation du serveur

start_process sous selenium : indique s'il faut démarrer automatiquement Selenium-Server. Si l'investissement est défini sur false, le serveur ne sera pas automatiquement démarré.

"cli_args" : {
      "webdriver.chrome.driver" : "",
      "webdriver.gecko.driver" : "",
      "webdriver.edge.driver" : ""
    }

Le pilote sous cli_args représente les chemins d'installation de plusieurs pilotes. Installez-les simplement avec succès

test_settings sont les données transmises à l'instance nightwatch. Plusieurs environnements peuvent être configurés ici. la valeur par défaut est requise, d'autres environnements peuvent être personnalisés.

nightwatch --env default

Ensuite, nous exécutons la commande ci-dessus dans le projet.

J'ai trouvé une erreur dans Windows et je n'ai pas pu l'exécuter. Nous devons configurer

"scripts": {
    "e2e": "nightwatch --env default",
  },

sous package.json pour qu'il puisse fonctionner normalement.

Si vous avez besoin de voir l'effet réel, nous pouvons simplement créer quelques cas sous le dossier du cas

Par exemple :

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

Résumé : Ce qui précède est cet article Tout le contenu, le code est très simple, vous pouvez l'essayer. J'espère que cela sera utile à l'apprentissage de tout le monde. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript, le Tutoriel vidéo jQuery, le Tutoriel bootstrap !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!