>웹 프론트엔드 >JS 튜토리얼 >JS에서 야간 감시 자동화 테스트에 대한 자세한 설명

JS에서 야간 감시 자동화 테스트에 대한 자세한 설명

青灯夜游
青灯夜游앞으로
2018-10-17 14:52:013033검색

이 기사에서는 JS의 Nightwatch 자동화 테스트를 소개하여 Nightwatch 자동화 테스트 방법을 익힐 수 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

nightwatch.js는 vue-cli에 깊이 통합된 웹 UI 자동화 테스트 프레임워크입니다. vue-cli를 기반으로 프로젝트를 빌드하면 기본적으로 바로 사용할 수 있습니다.

하지만 vue-cli를 항상 사용할 수는 없습니다. 왜냐하면 우리의 맞춤형 요구 사항을 충족할 수 없는 경우가 많기 때문입니다. 여러 번 우리는 빌드 프레임워크를 사용자 정의하거나 완전히 다시 빌드할 것입니다. 현재로서는 야간 감시를 통합하기가 어려울 것입니다. 이 문서는 이러한 테스트 프레임워크 구축을 시작하는 데 도움이 될 것입니다.

필요한 환경

먼저 프로젝트에 nightwatch를 설치하고, 프로젝트 디렉토리로 전환하세요

npm intall nightwatch -D

이것을 설치하는 것만으로는 충분하지 않으며, npm을 사용하여 설치할 수도 있는 selenium-server도 설치해야 합니다

npm install selenium-server -D

selenium-server는 Java 기반으로 개발되었으며 브라우저에 연결하는데 사용됩니다. 따라서 Selenium-server를 설치하기 전에 Java를 설치해야 합니다. Java 설치 방법

또한 브라우저 드라이버도 설치해야 합니다. 일반적으로 테스트에는 Chrome을 사용합니다

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

chromedriver를 직접 설치하면 설치에 실패했다는 메시지가 표시되며 수동으로 지정해야 합니다. 미러주소

다운로드가 필요한 부분을 다운로드 완료했습니다.

프로젝트 구성

nightwatch는 기본적으로 프로젝트 루트 디렉터리를 사용합니다nightwatch.conf.js作为配置文件。官网也有另外一种配置文件的格式就是nightwatch.json. 여기서는 형식이 더 유연하기 때문에 js 구성 방법을 사용합니다.

다음은 간단한 구성 파일입니다.

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: 케이스가 있는 폴더를 나타냅니다.

output_folder: 보고서 출력을 위한 폴더를 나타냅니다.

selenium 아래의 server_path: selenium-server의 설치 경로를 나타냅니다.

start_process under selenium: Selenium을 자동으로 시작할지 여부를 나타냅니다. 서버, 투자가 false로 설정되면 서버가 자동으로 시작되지 않습니다.

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

cli_args 아래의 드라이버는 여러 드라이버의 설치 ​​경로를 나타냅니다.

test_settings는 nightwatch 인스턴스에 전달되는 데이터입니다. 여기서는 다른 환경을 직접 구성할 수 있습니다. . 준비.

nightwatch --env default

그런 다음 프로젝트에서 위 명령을 실행합니다.

Windows에서 오류가 발생하여 실행할 수 없습니다. package.json

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

에서 구성해야 합니다. 그러면 정상적으로 실행될 수 있습니다.

실제 효과를 보려면 케이스 폴더 아래에 몇 가지 케이스를 생성하면 됩니다.

예:

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

요약: 위는 이 기사의 전체 내용이며 코드는 매우 간단합니다. 시도해 볼 수 있습니다. 그것. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 JavaScript Video Tutorial, jQuery Video Tutorial, bootstrap Tutorial을 방문하세요!

위 내용은 JS에서 야간 감시 자동화 테스트에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제