Microservice Playwright

Introducing Microservice Playwright !!

Microservice Playwright is space to learn with Playwright.

Contents

Table of Contents

NoTitleRemarks
0환경설정Playwright환경셋팅
1커리큘럼커리큘럼
2설계실습

Get Started(Playwright)

1. 기본 환경 bun 설치

Playwright로 프로젝트 만들기

$ powershell -c "irm bun.sh/install.ps1|iex"
$ bun create vite [프로젝트명]
$ cd [프로젝트명]
$ bun install
$ bun dev
# 기타 의존성 추가하기
$ bun add axios
# 기타 의존성 제거하기
$ bun remove axios
# [devDependencies에 추가하려면, 다른 패키지 관리자 툴과 동일하게 --dev 옵션을 사용](https://bluemiv.tistory.com/112).
$ bun add --dev prettier
$ bun create vite

2. vitest 설치

$ bun add -D vitest @testing-library/react @testing-library/user-event @testing-library/jest-dom happy-dom

# playwright 설치
$ bun add playwright@latest  → binary만 설치됨
$ npm init playwright@latest

3. Playwright 설치

  npx playwright test
    Runs the end-to-end tests.

  npx playwright test --ui
    Starts the interactive UI mode.

  npx playwright test --project=chromium
    Runs the tests only on Desktop Chrome.

  npx playwright test example
    Runs the tests in a specific file.

  npx playwright test --debug
    Runs the tests in debug mode.

  npx playwright codegen
    Auto generate tests with Codegen.
  • next auth 설치
$ yarn add next-auth

Data & Source

Table of Data & Source

NoTitleEducational InstitutionSourceRemarks
1mio개인개발mioPlaywright

Playwright로 프로젝트 만들기

1. Playwright App 설치하기

$ yarn create next-app [프로젝트 명] --typescript

2. eslint, prettier 라이브러리 설치(vscode extension 설치와 settings.json 설정은 필수)

  • 특정한 폴더로 이동하여 create-Playwright-app 명령어를 이용하여 spa라는 폴더를 만들어 보도록 하겠습니다.
$ npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
$ npm i -D prettier eslint-config-prettier eslint-plugin-prettier
$ npm i -D babel-eslint eslint-plugin-babel
$ npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
# or 
$ yarn add eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
$ yarn add prettier eslint-config-prettier eslint-plugin-prettier
$ yarn add babel-eslint eslint-plugin-babel
$ yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser
$ yarn add --dev @next/eslint-plugin-next

3. 서버 가동하기

  • yarn으로 가동 가능, 만약 yarn이 설치 안되어 있으면…
$ yarn dev
$ yarn build
$ yarn start

4. Material UI

$ yarn add @material-ui/core

5. Semantic UI

$ yarn add semantic-ui-react semantic-ui-css

6. axios

$ yarn add axios

Reference