source

gitlab-ci에서의 VueJS 앱 e2e 테스트

goodcode 2022. 8. 20. 19:01
반응형

gitlab-ci에서의 VueJS 앱 e2e 테스트

Nightswatch.js를 사용한 엔드 투 엔드 테스트를 포함하여 vue-cli를 사용하여 VueJS 프로젝트를 생성했습니다.

다음 .gitlab-ci.yml 파일을 사용하고 있습니다.

services:
  - selenium/standalone-chrome

stages:
  - test
  - pages

test:
  image: node:6.11
  stage: test
  before_script:
    - node -v
    - npm -v
  script:
    - npm install
    - npm test

pages:
  image: node:6.11
  stage: pages
  before_script:
    - node -v
    - npm -v
  script:
    - npm install
    - npm run build
    - cp -R ./dist ./public
    - cd ./public
    - ls
  artifacts:
    paths:
      - public
  only:
    - master

이거는nightswatch.conf.js파일

require('babel-register')
var config = require('../../config')

// http://nightwatchjs.org/gettingstarted#settings-file
module.exports = {
  src_folders: ['test/e2e/specs'],
  output_folder: 'test/e2e/reports',
  custom_assertions_path: ['test/e2e/custom-assertions'],

  selenium: {
    start_process: true,
    server_path: require('selenium-server').path,
    host: '127.0.0.1',
    port: 4444,
    cli_args: {
      'webdriver.chrome.driver': require('chromedriver').path
    }
  },

  test_settings: {
    default: {
      selenium_port: 4444,
      selenium_host: 'localhost',
      silent: true,
      globals: {
        devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
      }
    },

    chrome: {
      desiredCapabilities: {
        browserName: 'chrome',
        javascriptEnabled: true,
        acceptSslCerts: true
      }
    },

    firefox: {
      desiredCapabilities: {
        browserName: 'firefox',
        javascriptEnabled: true,
        acceptSslCerts: true
      }
    }
  }
}

Gitlab-CI에서는 작업은 통과하지만 로그를 보면 유닛 테스트만 통과하고 엔드 투 엔드 테스트는 통과하지 않습니다.

> node test/e2e/runner.js

Starting selenium server... 
An error occurred while trying to start Selenium. Check if JAVA is installed on your machine.
{ Error: spawn java ENOENT
    at exports._errnoException (util.js:1020:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:197:32)
    at onErrorNT (internal/child_process.js:376:16)
    at _combinedTickCallback (internal/process/next_tick.js:80:11)
    at process._tickCallback (internal/process/next_tick.js:104:9)
    at Module.runMain (module.js:606:11)
    at run (bootstrap_node.js:383:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:496:3
  code: 'ENOENT',
  errno: 'ENOENT',
  syscall: 'spawn java',
  path: 'java',
  spawnargs: 
   [ '-Dwebdriver.chrome.driver=/builds/Overdrivr/frontend/node_modules/chromedriver/lib/chromedriver/chromedriver',
     '-jar',
     '/builds/Overdrivr/frontend/node_modules/selenium-server/lib/runner/selenium-server-standalone-3.8.1.jar',
     '-port',
     4444 ] }
INFO Selenium process finished.
Job succeeded

Gitlab-CI에서 e2e 테스트를 실행하도록 gitlab-ci 또는 나이트워치를 적절하게 설정하려면 어떻게 해야 합니까?

네, 이제 설정과 작성 파일을 좀 더 살펴보니 문제가 뭔지 알 것 같습니다.가장 먼저 해야 할 일은 자신의 능력을selenium/standalone-chrome.yml 파일의 이름을 입력합니다.문제는 Java가 설치되지 않은 테스트 컨테이너(노드 이미지)에서 셀레늄 스탠드아론을 시작하려고 한다는 것입니다.하지만, 그selenium/standalone-chrome이미지에는 해당됩니다.이곳에서는 테스트의 포인트입니다.localhost

services:
  "chrome"
  - selenium/standalone-chrome

#...rest of file can stay the same

두 번째로 해야 할 일은 나이트워치 구성에서 셀레늄 섹션을 완전히 삭제하는 것입니다.selenium_host당신의 크롬 서비스에서 test_blocked에 있습니다.

selenium_host: 'chrome',

여기 a가 있습니다.nightwatch.json그리고.docker-compose.yml나한테는 효과가 있어요.

docker-param.yml

version: '3'
services:  
chrome:
  image: selenium/standalone-chrome
tests:
  image: nightwatch-tests
  environment: 
    - ENV_PASS=${ENV_PASS}
  depends_on:
    - chrome

나이트워치.json

{
  "src_folders": [
    "nw_tests"
  ],
  "output_folder": "nw_reports",
  "page_objects_path": "./nw_tests/pages",
  "globals_path": "globals.js",
  "test_workers": false,  
  "test_settings": {
    "default": {
      "launchUrl": "https://mylaunchurl/login",
      "selenium_port": 4444,
      "selenium_host": "chrome",
      "silent": true,
      "screenshots": {
        "enabled": true,
        "path": "nw_screenshots"
      },
      "desiredCapabilities": {
        "browserName": "chrome",
        "chromeOptions" : {
          "args": ["deny-permission-prompts"],
          "prefs": {
            "profile.default_content_settings.popups": 0,
            "download.prompt_for_download": false
          }
        }
      }
    }
  }
}

언급URL : https://stackoverflow.com/questions/47708097/e2e-testing-of-vuejs-app-in-gitlab-ci

반응형