콘텐츠로 이동
Tauri
Guides References Blog Releases

WebdriverIO 이용하기

이 장의 WebDriver 테스트 사례에서는 WebdriverIO와 그 테스트 스위트를 사용하므로, npm 또는 yarn과 함께 Node.js가 이미 설치되어 있는 것을 전제로 합니다(완성된 모델 애플리케이션에서는 yarn이 사용됩니다).

테스트용 디렉토리 생성

섹션 제목: “테스트용 디렉토리 생성”

프로젝트 내에 테스트를 작성할 장소를 만듭시다. 이 프로젝트 사례에서는 “중첩된” 디렉토리를 사용하지만, 이는 나중에 다른 프레임워크에 대해서도 자세히 알아보기 위함이며, 일반적으로는 “하나의 프레임워크”만 필요합니다. mkdir -p webdriver/webdriverio로 사용할 디렉토리를 만듭니다. 이하 이 설정 가이드에서는 webdriver/webdriverio 디렉토리 내에 있다고 가정합니다.

WebdriverIO 프로젝트 초기화

섹션 제목: “WebdriverIO 프로젝트 초기화”

기존 package.json을 사용하여 이 테스트 스위트를 부트스트랩(시작)합니다. 이미 구체적인 WebdriverIO 설정 옵션을 선정했으며, 간단하고 실용적인 솔루션을 소개하기 위함입니다. 이 항목의 마지막 ”> 여기를 클릭…” 부분에 빈 상태에서 설정하는 절차에 대한 설정 가이드가 접혀 있습니다.

package.json:

{
  "name": "webdriverio",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "test": "wdio run wdio.conf.js"
  },
  "dependencies": {
    "@wdio/cli": "^7.9.1"
  },
  "devDependencies": {
    "@wdio/local-runner": "^7.9.1",
    "@wdio/mocha-framework": "^7.9.1",
    "@wdio/spec-reporter": "^7.9.0"
  }
}

테스트 스위트로 WebdriverIO 설정을 실행하는 스크립트가 있으며, 이는 test 명령으로 사용할 수 있습니다. 또한, 처음에 설정할 때 @wdio/cli 명령으로 추가되는 종속성도 있습니다. 간단히 말해, 이러한 종속성은 로컬 WebDriver 러너, 테스트 프레임워크로서의 Mocha, 그리고 단순한 Spec Reporter를 사용한 가장 간단한 설정을 위한 것입니다.

여기를 클릭(프로젝트를 빈 상태에서 설정하는 경우)

CLI는 대화형이며, 직접 조작할 도구를 선택할 수 있습니다. 단, 설정 가이드의 설명과 다를 수 있으며, 다른 부분은 직접 설정해야 한다는 점에 유의하십시오.

이 npm 프로젝트에 WebdriverIO CLI를 추가합시다.

npm install @wdio/cli

다음으로, 대화형 config 명령을 실행하여 WebdriverIO 테스트 스위트를 설정하려면 다음 명령을 실행합니다:

npx wdio config

설정

섹션 제목: “설정”

package.json 내의 test 스크립트에 wdio.conf.js 파일이 기재되어 있는 것을 눈치채셨을 것입니다. 이는 WebdriverIO 설정 파일로, 테스트 스위트의 대부분의 측면을 제어하는 것입니다.

wdio.conf.js:

const os = require('os');
const path = require('path');
const { spawn, spawnSync } = require('child_process');


// `tauri-driver` 자식 프로세스 추적
let tauriDriver;


exports.config = {
  specs: ['./develop/tests/specs/**/*.js'],
  maxInstances: 1,
  capabilities: [
    {
      maxInstances: 1,
      'tauri:options': {
        application: '../../target/release/hello-tauri-webdriver',
      },
    },
  ],
  reporters: ['spec'],
  framework: 'mocha',
  mochaOpts: {
    ui: 'bdd',
    timeout: 60000,
  },


  // Webdriver 세션에 필요한 Rust 프로젝트가 빌드되었는지 확인
  onPrepare: () => spawnSync('cargo', ['build', '--release']),


  // Webdriver 요청을 프록시할 수 있도록 세션 시작 전에 `tauri-driver`가 실행 중인지 확인
  beforeSession: () =>
    (tauriDriver = spawn(
      path.resolve(os.homedir(), '.cargo', 'bin', 'tauri-driver'),
      [],
      { stdio: [null, process.stdout, process.stderr] }
    )),


  // 세션 시작 시 생성된 "tauri-driver" 프로세스 정리
  afterSession: () => tauriDriver.kill(),
};

exports.config 객체의 속성에 관심이 있다면 webdriver 문서를 참조하십시오. webdriverIO 고유가 아닌 항목에 대해서는 onPrepare, beforeSession, afterSession 내에서 왜 명령을 실행하는지에 대한 주석이 있습니다. “스펙(테스트 사양)“도 "./develop/tests/specs/**/*.js"로 설정되므로, 다음에 “테스트 사양”을 만듭시다.

테스트 사양

섹션 제목: “테스트 사양”

“테스트 사양”에는 실제 애플리케이션을 테스트하는 코드가 포함되어 있습니다. 테스트 러너는 이 “테스트 사양”을 읽고 필요에 따라 자동으로 실행합니다. 그럼 지정된 디렉토리에 “테스트 사양”을 만듭시다.

test/specs/example.e2e.js:

// "16진수 색상" `#abcdef`에서 "휘도(luma 루마)"를 계산
function luma(hex) {
  if (hex.startsWith('#')) {
    hex = hex.substring(1);
  }


  const rgb = parseInt(hex, 16);
  const r = (rgb >> 16) & 0xff;
  const g = (rgb >> 8) & 0xff;
  const b = (rgb >> 0) & 0xff;
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}


describe('Hello Tauri', () => {
  it('should be cordial', async () => {
    const header = await $('body > h1');
    const text = await header.getText();
    expect(text).toMatch(/^[hH]ello/);
  });


  it('should be excited', async () => {
    const header = await $('body > h1');
    const text = await header.getText();
    expect(text).toMatch(/!$/);
  });


  it('should be easy on the eyes', async () => {
    const body = await $('body');
    const backgroundColor = await body.getCSSProperty('background-color');
    expect(luma(backgroundColor.parsed.hex)).toBeLessThan(100);
  });
});

첫 번째 luma 함수는 테스트 중 하나에 대한 헬퍼 함수일 뿐이며, 실제 애플리케이션 테스트와는 관련이 없습니다. 다른 테스트 프레임워크에 익숙하다면 describe, it, expect 등 사용된 유사한 함수가 “개방”(외부 액세스 가능)되어 있음을 알 수 있습니다. 기타 API, 예를 들어 $와 같은 항목이나 공개된 메서드 등에 대해서는 WebdriverIO API 문서에서 설명합니다.

테스트 스위트 실행

섹션 제목: “테스트 스위트 실행”

설정과 테스트 사양이 모두 준비되었으므로 실행해 봅시다!

npm test

다음과 같은 출력이 표시될 것입니다:

➜  webdriverio git:(main) ✗ yarn test
yarn run v1.22.11
$ wdio run wdio.conf.js


Execution of 1 workers started at 2021-08-17T08:06:10.279Z


[0-0] RUNNING in undefined - /develop/tests/specs/example.e2e.js
[0-0] PASSED in undefined - /develop/tests/specs/example.e2e.js


 "spec" Reporter:
------------------------------------------------------------------
[wry 0.12.1 linux #0-0] Running: wry (v0.12.1) on linux
[wry 0.12.1 linux #0-0] Session ID: 81e0107b-4d38-4eed-9b10-ee80ca47bb83
[wry 0.12.1 linux #0-0]
[wry 0.12.1 linux #0-0] » /develop/tests/specs/example.e2e.js
[wry 0.12.1 linux #0-0] Hello Tauri
[wry 0.12.1 linux #0-0]    ✓ should be cordial
[wry 0.12.1 linux #0-0]    ✓ should be excited
[wry 0.12.1 linux #0-0]    ✓ should be easy on the eyes
[wry 0.12.1 linux #0-0]
[wry 0.12.1 linux #0-0] 3 passing (244ms)




Spec Files:   1 passed, 1 total (100% completed) in 00:00:01


Done in 1.98s.

Spec Reporter 부분에는 test/specs/example.e2e.js 파일의 세 가지 테스트 모두와 최종 보고서 Spec Files: 1 passed, 1 total (100% Complete) in 00:00:01가 표시됩니다.

WebdriverIO 테스트 스위트를 사용하면 몇 줄의 설정과 하나의 명령 실행만으로 Tauri 애플리케이션의 e2e 테스트를 쉽게 실행할 수 있었습니다! 더욱 놀라운 것은 애플리케이션을 전혀 수정할 필요가 없었다는 것입니다.

【※ 이 한국어판은, 「Feb 22, 2025 영문판」에 근거하고 있습니다】

Support on Open Collective Sponsor on GitHub

© 2025 Tauri Contributors. CC-BY / MIT