feat: E2E test using Playwright

[gee05053]

This PR resolves https://github.com/lablup/backend.ai-webui/issues/2081

Implement e2e test using playwright Loop Doc

You must make .env file at playwright directory(webui/playwright/.env) and copy and paste below config

[email protected]
SUPER_ADMIN_PASSWORD=wJalrXUt
[email protected]
ADMIN_PASSWORD=cWbsM_vB
[email protected]
USER_PASSWORD=C8qnIo29
[email protected]
USER2_PASSWORD=P7oxTDdz
[email protected]
INCORRECT_PASSWORD=dasdnsajdnk
PAGE_URL=http://localhost:9081
ENDPOINT=http://localhost:8090
CREATE_VFOLDER_GROUP=test_peoject
NOT_CREATE_VFOLDER_GROUP=default
DELETE_VFOLDER=vMyFkaomKN9vkTORaywaleDayTjYGXwDyB4LPxUiLFvVAWCW2iFjEtJzzXZ8gNK3
NEW_SESSION_VERSION=Ubuntu 20.04 aarch64
NEW_SESSION_MOUNTED_VFOLDER=test
DELETE_SESSION=vNkj
CREATE_USER_NAME=test9
[email protected]
CREATE_USER_PASSWORD=test123!
[email protected]

How to run

1. Follow extension guide to install extension
2. Pull this branch
3. Open test explorer at left side bar as in the picture below
4. Click to play button at test explorer or beside of code lines to run test
5. You can check the testing process through browser and test result on terminal

Checklist: (if applicable)

• [x] Mention to the original issue
• [x] Documentation
• [ ] Minium required manager version
• [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
• [ ] Minimum requirements to check during review
• [ ] Test case(s) to demonstrate the difference of before/after

[aws-amplify-ap-northeast-2[bot]]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-2115.d3g9cs6u59b8lw.amplifyapp.com

[yomybaby]

@gee05053 This PR doesn't have any description of how to run the test. Please add it with related links.

[yomybaby]

@gee05053 When I run npx playwright install I got errors:

Error: test file "e2eTest.spec.ts" should not import test file "pages/CredentialPage.spec.ts"

   at e2eTest.spec.ts:1

> 1 | import { createUser, deleteUser } from './pages/CredentialPage.spec';
    | ^
  2 | import { createVfolder, deleteVfolder } from './pages/DataStoragePage.spec';
  3 | import { login } from './pages/LoginPage.spec';
  4 | import { createSession, deleteSession } from './pages/SessionPage.spec';

Error: test file "e2eTest.spec.ts" should not import test file "pages/DataStoragePage.spec.ts"

   at e2eTest.spec.ts:1

> 1 | import { createUser, deleteUser } from './pages/CredentialPage.spec';
    | ^
  2 | import { createVfolder, deleteVfolder } from './pages/DataStoragePage.spec';
  3 | import { login } from './pages/LoginPage.spec';
  4 | import { createSession, deleteSession } from './pages/SessionPage.spec';

Error: test file "e2eTest.spec.ts" should not import test file "pages/LoginPage.spec.ts"

   at e2eTest.spec.ts:1

> 1 | import { createUser, deleteUser } from './pages/CredentialPage.spec';
    | ^
  2 | import { createVfolder, deleteVfolder } from './pages/DataStoragePage.spec';
  3 | import { login } from './pages/LoginPage.spec';
  4 | import { createSession, deleteSession } from './pages/SessionPage.spec';

Error: test file "e2eTest.spec.ts" should not import test file "pages/SessionPage.spec.ts"

   at e2eTest.spec.ts:1

> 1 | import { createUser, deleteUser } from './pages/CredentialPage.spec';
    | ^
  2 | import { createVfolder, deleteVfolder } from './pages/DataStoragePage.spec';
  3 | import { login } from './pages/LoginPage.spec';
  4 | import { createSession, deleteSession } from './pages/SessionPage.spec';




To open last HTML report run:

  npx playwright show-report

[github-actions[bot]]

Coverage report for ./react

St.:grey_question:	Category	Percentage	Covered / Total
🔴	Statements	3.02%	102/3378
🔴	Branches	3.19%	69/2165
🔴	Functions	1.5%	17/1133
🔴	Lines	3.08%	102/3315

Test suite run success

20 tests passing in 4 suites.

Report generated by 🧪jest coverage report action from 278c09f01d8ccf7cf1d3ca694739cdb30a5906ff

[yomybaby]

There have been many changes in the UI after this PR was created. Therefore, I will close this PR without merging and continue working from https://github.com/lablup/backend.ai-webui/pull/2647 . @gee05053 Thank you for your contribution.