source

헤드리스 브라우저로 테스트를 실행하려면 어떻게 해야 합니까?

manysource 2023. 8. 8. 21:42

헤드리스 브라우저로 테스트를 실행하려면 어떻게 해야 합니까?

사용:

ng test

Angular CLI는 기본적으로 Chrome에서 테스트를 실행하는데, 이는 훌륭하지만 콘솔 전용 환경(헤드리스 브라우저)에서 테스트를 실행해야 하는 경우에는 어떻게 해야 합니까?

또한 실행할 때마다 브라우저를 사용하지 않을 것인지 여부를 지정할 수 있으므로 다음과 같은 작업을 수행할 수 있습니다.

ng test --browsers MyHeadLessBrowser


편집:

실행 중인 팬텀JS 저는 다음을 얻었습니다.

PhantomJS 2.1.1(Linux 0.0.0) 오류 유형 오류: useValue, useFactory, data notitable! at http://localhost:9876/_karma_webpack_/polyfills.message.js:854


참조 오류:변수를 찾을 수 없습니다.intlin http://localhost:9876/_karma_webpack_/filename.js(행 49362) intlDateFormat@http://localhost:9876/_karma_webpack_/filename.js:49362:20

윌리엄 햄프셔의 의견과 쿠가의 의견, 그리고 저의 개인적인 추가 사항을 바탕으로 한 보다 완벽한 답변입니다.


간단한 답변: 크롬 헤드리스 사용

헤드리스 크롬만 사용할 수 있습니다.

ng test --browsers ChromeHeadless

크롬 59+가 필요합니다.

하지만 팬텀이 필요하다면,JS(및/또는 기본값 변경)ng test인수가 없는 행동) 다음을 읽습니다.


긴 답변: PhantomJS 사용

편집: 팬텀을 주의하십시오.JS 프로젝트가 보관되었습니다. 이 스레드를 참조하십시오.

세우다

브라우저 없이(선택적으로) 테스트를 실행하려면 Phantom(팬텀)JS, 다음을 수행해야 합니다.

일부 종속성 설치:

npm install --save-dev karma-phantomjs-launcher
npm install --save intl

팬텀 추가카르마의 플러그인 목록으로 JS.

열다.karma.conf.js추가require('karma-phantomjs-launcher')에게plugins배열, 예:

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-phantomjs-launcher'),
      // ...
    ],

폴리필 사용

열기src/polyfills.ts다음 행을 파일로 작성하고 주석을 제거합니다.

브라우저 폴리필

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

응용 프로그램 가져오기

import 'intl';
import 'intl/locale-data/jsonp/en';

테스트 실행 방법

명령 실행 시 브라우저 지정

아니요. 다음을 사용하여 테스트를 실행할 수 있습니다.Chrome(angular-cli 기본값):

ng test --browsers Chrome

또는 팬텀JS(헤드 없음):

ng test --browsers PhantomJS

의 기본 동작 변경(just)ng test

의 기본 동작을 변경할 수 있습니다.ng test(그래서 아닐 때는--browsers인수 제공)의 값을 변경하여browsers의 배열.karma.conf.js.

이제 사용하도록 설정할 수 있습니다.Chrome(기본 각도-cli 설정):

browsers: ['Chrome'],

또는PhantomJS:

browsers: ['PhantomJS'],

또는 둘 다:

browsers: ['Chrome', 'PhantomJS'],

Angular는 브라우저 없이 테스트를 실행하는 데 필요한 모든 것을 제공합니다.

를 엽니다.karma.conf.jsChromeHeadless 파일을 브라우저 배열에 추가합니다.

browsers: ['ChromeHeadless'],

시험 잘 봤어요!

이렇게 하면 효과가 있습니다.

npm i --save-dev karma-phantomjs-launcher

그런 다음 karma.conf.js 파일의 플러그인 속성을 수정하여 팬텀을 추가합니다.목록에 대한 JS 플러그인.팬텀 추가브라우저 속성에 대한 JS입니다.

plugins: [
    require( 'karma-jasmine' ),
    require( 'karma-chrome-launcher' ),
    require( 'karma-phantomjs-launcher' ),
    require( 'karma-remap-istanbul' ),
    require( 'angular-cli/plugins/karma' )
],
...
browsers: [ 'PhantomJS', 'Chrome' ],

완전히 머리가 없는 경험을 원하기 때문에 브라우저 속성에서 Chrome을 제거하고 플러그인 배열에서 karma-chrome-launcher도 제거할 수 있습니다.

Angular 11의 작업 솔루션.

karma.conf.js

   browsers: ["ChromeHeadless"],
   singleRun: true

ㅠㅠㅠㅠㅠㅠㅠㅠㅠng test또는ng test --project=project_name.

이는 CI 환경에서도 작동합니다.

참고: 여기서는 두 가지 다른 답변을 조합한 것입니다.

이를 무턱대고 실행하는 목적이 CI 서버에서 코드를 실행하기 위한 것이라면 다음과 같이 설정할 수도 있습니다.singleRun: true당신의 업보에서.conf.js.이것이 없으면 카르마는 계속해서 달리고 시간이 초과됩니다.

언급URL : https://stackoverflow.com/questions/46405196/how-can-i-run-tests-with-a-headless-browser