Chaos Stream Proxy를 사용한 종단 간 테스트

15738 단어 javascripttutorialopensourcetesting
비디오 소스에 문제가 있을 때 비디오 플레이어의 동작을 테스트하는 것은 지루한 작업이었습니다. 다양한 오류를 테스트하기 위해 여러 깨진 스트림을 수동으로 생성하거나 찾아내야 했습니다. 동일한 오류가 항상 동일한 타이밍에 발생하는지 확인하십시오.

이 문제를 해결하기 위해 Eyevinn은 Chaos Stream Proxy를 open-source으로 출시했습니다! 이름에서 알 수 있듯이 이것은 적응형 비트 전송률 스트림을 프록시하고 결정론적으로 손상을 도입하는 데 매우 편리한 도구입니다.

이 자습서에서는 Eyevinn WebPlayer 을 사용하여 오픈 소스Playwright 의 엔드 투 엔드 테스트에서 프록시를 사용하는 방법을 보여줍니다.

카오스 스트림 프록시 사용



이 자습서의 목적으로 사용할 Chaos Stream Proxy의 데모가 현재 실행 중입니다here.

프록시는 HLS 및 MPEG-DASH 스트리밍 형식을 모두 지원하며 문자열화된 JSON 객체를 쿼리 매개변수로 프록시된 URL에 추가하여 다양한 손상을 쉽게 추가할 수 있습니다. 이 HLS URL을 사용하는 경우:

https://maitv-vod.lab.eyevinn.technology/VINN.mp4/master.m3u8


예를 들어 Eyevinn WebPlayerhosted here에서 문제 없이 재생할 수 있습니다. 그러나 Chaos Stream Proxy를 통해 프록시하고 &statusCode=[{i:*,code:404}]를 설정하면 다음과 같습니다.

https://chaos-proxy.prod.eyevinn.technology/api/v2/manifests/hls/proxy-master.m3u8?url=https://maitv-vod.lab.eyevinn.technology/VINN.mp4/master.m3u8&statusCode=[{i:*,code:404}]


대신 404를 설정했기 때문에 모든 세그먼트에 대해 i:* 오류가 발생합니다. 개별 세그먼트를 지정할 수도 있습니다.

다른 유형의 손상을 지정하려면 the project's README 을 확인하십시오.

EPAS 및 Eyevinn WebPlayer



Eyevinn WebPlayer는 모든 비디오/오디오 플레이어에서 분석을 구현하기 위한 표준을 정의하는 공개 사양인 구현Eyevinn Player Analytics Specification (EPAS) 입니다. 이는 WebPlayer가 따를 것으로 예상되는 이벤트 보고 형식이 있음을 의미합니다.

사용자 상호 작용은 EPAS 구현의 유효성을 검사하기 위해 쉽게 만들 수 있으며 Chaos Stream Proxy 덕분에 이제 매니페스트 관련 오류도 식은 죽 먹기입니다!

극작가 설정



Playwright는 실제 브라우저 환경에서 코드를 자동으로 테스트하는 데 사용하는 강력한 종단 간 테스트 러너입니다. 작성 시점에 "@playwright/test": "^1.19.2"(이것은 Node.js 프로젝트임)에 package.json에 대한 종속성을 추가하고 있습니다. 스크립트"test:e2e": "playwright test"도 추가합니다.

우리playwright.config.ts는 프로젝트 루트에 있으며 다음과 같습니다.

import { PlaywrightTestConfig, devices } from '@playwright/test';

const config: PlaywrightTestConfig = {
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  testDir: "tests/",
  workers: 3,
  use: {
    trace: 'on-first-retry',
    // Necessary to get the media codecs to play video (default 'chromium' doesn't have them) 
    channel: 'chrome'
  },
  webServer: {
    command: 'npm run examples',
    port: 1234,
    reuseExistingServer: !process.env.CI,
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
};
export default config;

testDir는 테스트.spec.ts 파일을 넣은 폴더를 가리킵니다. examples 명령의 npm run examples는 Playwright가 사용할 HTML 파일을 저장하는 루트 디렉토리의 폴더입니다.

테스트를 실행하려면 channel: 'chrome'가 필요합니다. 기본 설정은 chromium , which doesn't include the necessary media codecs for video playback 입니다. 이로 인해 자동화된 워크플로 및 Firefox 및 Webkit에서 테스트 실행에 문제가 발생할 수 있지만 Chrome에서는 로컬로 작동합니다.
examples 폴더에 Chaos Stream Proxy HTML에 대한 링크가 포함된 index.html HTML 파일을 추가합니다.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Examples</title>
</head>
<body>
  <a href="chaos-proxy/index.html">Chaos Stream Proxy Example</a>
</html>


뿐만 아니라 하위 폴더index.html의 Chaos Stream Proxy HTMLchaos-proxy 파일:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Chaos Stream Proxy Example</title>
  <script async src="../../packages/web-player-component/dist/web-player.component.js"></script>
</head>
<body>
  <!-- VOD: With segment delay of 1500ms and response code 400 on sixth (response of 400 will be sent after 1500ms): -->
  <eyevinn-video
    source="https://chaos-proxy.prod.eyevinn.technology/api/v2/manifests/hls/proxy-master.m3u8?url=https://maitv-vod.lab.eyevinn.technology/VINN.mp4/master.m3u8&delay=[{i:5,ms:1500}]&statusCode=[{i:5,code:400}]"
    muted autoplay>
  </eyevinn-video>
  <!-- VOD: With response of status code 404 on all segments: -->
  <eyevinn-video
  source="https://chaos-proxy.prod.eyevinn.technology/api/v2/manifests/hls/proxy-master.m3u8?url=https://maitv-vod.lab.eyevinn.technology/VINN.mp4/master.m3u8&statusCode=[{i:*,code:404}]"
  muted autoplay>
</eyevinn-video>
</body>
</html>


이 파일은 저장소에서 의 컴파일된 버전을 가져옵니다. 여기에서 WebPlayer를 <eyevinn-video> 태그가 있는 웹 구성 요소로 포함할 수 있습니다.
tests 폴더에 chaos-proxy.specs.ts 스크립트를 실행할 때 자동으로 실행되는 npm run test:e2e 를 추가합니다.

import { test } from '@playwright/test';

  test('player sends error events when loading corrupt streams', async ({page}) => {
    const [request] = await Promise.all([
      page.goto('/chaos-proxy/index.html'),
      page.waitForRequest(req => req.url().match('https://sink.epas') && req.method() === 'POST' && req.postDataJSON().event === "warning" && req.postDataJSON().payload.code === "400"),
      page.waitForRequest(req => req.url().match('https://sink.epas') && req.method() === 'POST' && req.postDataJSON().event === "warning" && req.postDataJSON().payload.code === "404"),
    ]);
  });

page 개체에서 사용할 수 있는 goto 및 waitForRequest 메서드에 대한 비동기 호출을 수행합니다. POSTrequests가 예상 형식을 준수하는지 확인합니다. 일치하는 두 요청이 모두 30초 이내에 이루어지면 테스트가 통과됩니다!
npm run test:e2e 로 테스트를 실행하면 결과는 다음과 같습니다.


성공!

보너스: VSCode 및 디버그 모드에 대한 극작가 테스트



극작가는 내 Microsoft에서 개발되었으므로 아마도 an excellent VS Code extension available이 있다는 것은 놀라운 일이 아닙니다.

이 확장 프로그램을 사용하면 개별 테스트를 개별적으로 실행하고 중단점을 추가하는 등의 작업을 손쉽게 수행할 수 있습니다!



또한 테스트 러너 브라우저에서 테스트를 보고 상호 작용할 수 있는 디버그 모드에 쉽게 액세스할 수 있습니다.

박스 모델에 대한 이해와 다른 박스 모델을 구현하는 방법을 설명하십시오.
몽키 스톤 Js

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage