Playwright 테스트를 위한 VSCode 실행 구성을 설정하는 가장 쉬운 방법

이 문서에서는 자체 VSCode 시작 구성 파일을 구성하여 Playwright VSCode extension에 대한 대체 접근 방식을 살펴보겠습니다. 이렇게 하면 테스트를 위한 특정 시작 구성 설정을 보다 세밀하게 제어할 수 있습니다.

먼저 package.json라는 vscode-debug 파일에 새 스크립트를 만듭니다. (필요에 맞게 극작가 구성 파일의 이름을 조정해야 할 수도 있습니다.)

"scripts": {
  "vscode-debug": "playwright test --config ./playwright.config.ts --workers=1"
},

다음으로 프로젝트의 루트에 .vscode 폴더를 만듭니다. 이 폴더에서 launch.json 라는 새 json 파일을 만듭니다.

다음 자리 표시자 구성 세부 정보를 파일에 입력합니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Playwright tests",
      "console": "integratedTerminal",
      "skipFiles": [
        "<node_internals>/**"
      ],

    }
  ]
}

아래의 재생 버튼을 클릭하거나 F5를 눌러 프로필을 실행하면 아무 작업도 수행되지 않는다는 것을 알 수 있습니다.



다음 항목을 추가하여 구성을 사용 가능하게 만들어 보겠습니다.

"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "vscode-debug", "--", "${fileBasename}"],

runtimeExecutable을 npm로 설정하면 위에서 생성한 npm 스크립트( vscode-debug )를 호출할 수 있습니다. -- , "${fileBasename}" 인수는 편집기에서 연 현재 강조 표시된 파일을 전달하도록 런처에 지시합니다.

이제 사양 파일을 편집기로 열고 실행 버튼을 클릭하여 설정을 테스트할 수 있습니다.



디버그하려면 원하는 코드 줄 옆에 중단점을 놓고 재생 버튼을 클릭하기만 하면 됩니다.



사양 파일이 아닌 파일을 강조 표시하고 포커스를 설정한 경우 프로필을 실행하면 다음과 같은 결과가 나타납니다.



좋습니다. 지금까지는 좋았습니다. Playwright inspector을 시작하려면 어떻게 해야 합니까? 위에서 만든 프로필을 복제하고 이름을 Playwright Inspector로 변경하여 약간 조정하고 env 환경 변수를 1로 설정하는 새 키PWDDEBUG를 도입하면 됩니다.

{
  "type": "node",
  "request": "launch",
  "name": "Playwright Inspector",
  "console": "integratedTerminal",
  "skipFiles": [
    "<node_internals>/**"
  ],
  "runtimeExecutable": "npm",
  "runtimeArgs": ["run-script", "vscode-debug", "--", "${fileBasename}"],
  "env": {
    "PWDEBUG": "1",
  }
}

"Playwright Inspector"를 선택하고 재생 버튼을 클릭하여 새 프로필을 테스트합니다.



아주 쉽습니다. 필요에 따라 이러한 프로필을 사용하여 창의력을 발휘할 수 있습니다. 다른 사용 사례는 다음과 같습니다.

다양한 테스트 환경에서 실행할 테스트를 시작하기 위한 프로필 설정

특정 브라우저에 대해 테스트를 실행하려면 시작 프로필을 생성합니다.

가능성은 무한합니다 🤯

마지막 해결책