Skip to content

Commit fa259f2

Browse files
ETtestimBaruch Odembaruchiro
authored
feat: add e2e testing with playwright (#84)
added playwright for e2e testing. it uses real browser and install the extension. can only run on chrome/ chromium browsers. headless mode can be just need to research more on how to. added a example test for npm. Also added a unique id to the tooltip so we can catch its selector with ease. --------- Co-authored-by: Baruch Odem <baruch.odem@checkmarx.com> Co-authored-by: Baruch Odem <baruchiro@gmail.com>
1 parent 2fbb6f6 commit fa259f2

File tree

9 files changed

+190
-11
lines changed

9 files changed

+190
-11
lines changed

‎.github/workflows/playwright.yml‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
name: Playwright Tests
2+
on:
3+
push:
4+
branches: [temp-actions]
5+
pull_request:
6+
branches: [main, master]
7+
jobs:
8+
test:
9+
timeout-minutes: 60
10+
runs-on: ubuntu-latest
11+
steps:
12+
- uses: actions/checkout@v3
13+
- uses: actions/cache@v2
14+
with:
15+
path: node_modules
16+
key: ${{ runner.os }}-${{ hashFiles('package-lock.json') }}
17+
- uses: actions/setup-node@v3
18+
with:
19+
node-version: 16
20+
- uses: actions/cache@v2
21+
with:
22+
path: playwright-bin
23+
key: ${{ runner.os }}-${{ hashFiles('node_modules/playwright/package.json') }}
24+
- run: yarn
25+
- name: Run Playwright tests
26+
run: yarn e2e
27+
- uses: actions/upload-artifact@v3
28+
if: always()
29+
with:
30+
name: playwright-report
31+
path: playwright-report/
32+
retention-days: 30

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,7 @@ dist
4848

4949
# Snapshots cache
5050
tests/real-examples/snapshots/
51+
# Playwright
52+
/test-results/
53+
/playwright-report/
54+
/playwright/.cache/

‎e2e/npm.spec.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { test, Expect } from '../fixtures.js';
2+
3+
test.describe('npm', () => {
4+
test('check for overlay and tooltip', async ({ page }) => {
5+
await page.goto('https://stackoverflow.com/questions/9023672/how-do-i-resolve-cannot-find-module-error-using-node-js', {
6+
waitUntil: 'domcontentloaded',
7+
});
8+
const moduleNameLink = page.locator('overlay-indicator[package-name="module_name"]');
9+
await moduleNameLink.scrollIntoViewIfNeeded();
10+
await moduleNameLink.hover();
11+
const overlayModuleName = page.locator('.overlay-tooltip__tooltip .overlay-indicator__tooltip[data-testid="module_name"]');
12+
await Expect(overlayModuleName).toBeVisible();
13+
});
14+
});

‎fixtures.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
//This file is needed to use the tests with the extension installed and running
2+
import { test as base, chromium } from '@playwright/test';
3+
import path from 'path';
4+
import { fileURLToPath } from 'url';
5+
6+
const __filename = fileURLToPath(import.meta.url);
7+
const __dirname = path.dirname(__filename);
8+
9+
export const test = base.extend({
10+
// eslint-disable-next-line no-empty-pattern
11+
context: async ({}, use) => {
12+
const pathToExtension = path.join(__dirname, 'dist', 'chrome');
13+
const context = await chromium.launchPersistentContext('', {
14+
headless: false,
15+
// To run and debug the extension in head mode remove `--headless=new` from args
16+
args: [`--headless=new`, `--disable-extensions-except=${pathToExtension}`, `--load-extension=${pathToExtension}`],
17+
// remove the comment below to slow down the tests
18+
// slowMo: 500
19+
});
20+
await use(context);
21+
await context.close();
22+
},
23+
extensionId: async ({ context }, use) => {
24+
let [background] = context.serviceWorkers();
25+
if (!background) background = await context.waitForEvent('serviceworker');
26+
27+
const extensionId = background.url().split('/')[2];
28+
await use(extensionId);
29+
},
30+
});
31+
32+
export const Expect = test.expect;

‎jest.config.cjs‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -153,10 +153,11 @@ module.exports = {
153153
// testLocationInResults: false,
154154

155155
// The glob patterns Jest uses to detect test files
156-
// testMatch: [
157-
// "**/__tests__/**/*.[jt]s?(x)",
158-
// "**/?(*.)+(spec|test).[tj]s?(x)"
159-
// ],
156+
testMatch: [
157+
'**/__tests__/**/*.[jt]s?(x)',
158+
'**/?(*.)+(spec|test).[tj]s?(x)',
159+
'!**/e2e/**/*.js?(x)', // exclude Playwright tests from Jest test runs
160+
],
160161

161162
// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
162163
// testPathIgnorePatterns: [

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,12 @@
1111
"email": "contact@os-scar.com"
1212
},
1313
"scripts": {
14-
"postinstall": "husky install",
14+
"postinstall": "husky install && playwright install --with-deps chromium",
1515
"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
1616
"test:integration": "node --experimental-vm-modules node_modules/jest/bin/jest.js tests",
1717
"test:components": "cd tests/components && vite",
18+
"e2e": "yarn build && playwright test",
19+
"e2e:debug": "yarn e2e --debug",
1820
"build": "gulp build",
1921
"build:watch": "gulp --series build watch",
2022
"lint": "eslint src tests",
@@ -26,6 +28,7 @@
2628
"start:firefox": "yarn __start --source-dir ./dist/firefox"
2729
},
2830
"devDependencies": {
31+
"@playwright/test": "^1.33.0",
2932
"@rollup/plugin-commonjs": "^24.0.0",
3033
"@rollup/plugin-node-resolve": "^15.0.1",
3134
"@types/chrome": "^0.0.206",

‎playwright.config.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
// @ts-check
2+
import { defineConfig, devices } from '@playwright/test';
3+
4+
/**
5+
* Read environment variables from file.
6+
* https://github.com/motdotla/dotenv
7+
*/
8+
// require('dotenv').config();
9+
10+
/**
11+
* @see https://playwright.dev/docs/test-configuration
12+
*/
13+
export default defineConfig({
14+
testDir: './e2e',
15+
/* Run tests in files in parallel */
16+
fullyParallel: true,
17+
/* Fail the build on CI if you accidentally left test.only in the source code. */
18+
forbidOnly: !!process.env.CI,
19+
/* Retry on CI only */
20+
retries: process.env.CI ? 2 : 0,
21+
/* Opt out of parallel tests on CI. */
22+
workers: process.env.CI ? 1 : undefined,
23+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
24+
reporter: 'html',
25+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
26+
use: {
27+
/* Base URL to use in actions like `await page.goto('/')`. */
28+
// baseURL: 'http://127.0.0.1:3000',
29+
30+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
31+
trace: 'on-first-retry',
32+
},
33+
34+
/* Configure projects for major browsers */
35+
projects: [
36+
{
37+
name: 'chromium',
38+
use: { ...devices['Desktop Chrome'] },
39+
},
40+
41+
// {
42+
// name: 'firefox',
43+
// use: { ...devices['Desktop Firefox'] },
44+
// },
45+
46+
// {
47+
// name: 'webkit',
48+
// use: { ...devices['Desktop Safari'] },
49+
// },
50+
51+
/* Test against mobile viewports. */
52+
// {
53+
// name: 'Mobile Chrome',
54+
// use: { ...devices['Pixel 5'] },
55+
// },
56+
// {
57+
// name: 'Mobile Safari',
58+
// use: { ...devices['iPhone 12'] },
59+
// },
60+
61+
/* Test against branded browsers. */
62+
// {
63+
// name: 'Microsoft Edge',
64+
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
65+
// },
66+
// {
67+
// name: 'Google Chrome',
68+
// use: { ..devices['Desktop Chrome'], channel: 'chrome' },
69+
// },
70+
],
71+
72+
/* Run your local dev server before starting the tests */
73+
// webServer: {
74+
// command: 'npm run start',
75+
// url: 'http://127.0.0.1:3000',
76+
// reuseExistingServer: !process.env.CI,
77+
// },
78+
});

‎src/custom-elements/PackageReport.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="overlay-indicator__tooltip">
2+
<div class="overlay-indicator__tooltip" :data-testId="packageName">
33
<div class="overlay-indicator__tooltip__header">
44
<div class="overlay-indicator__tooltip__header__logo">
55
<component :is="registryLogo" />

‎yarn.lock‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -646,6 +646,16 @@
646646
"@nodelib/fs.scandir" "2.1.5"
647647
fastq "^1.6.0"
648648

649+
"@playwright/test@^1.33.0":
650+
version "1.33.0"
651+
resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.33.0.tgz#669ef859efb81b143dfc624eef99d1dd92a81b67"
652+
integrity sha512-YunBa2mE7Hq4CfPkGzQRK916a4tuZoVx/EpLjeWlTVOnD4S2+fdaQZE0LJkbfhN5FTSKNLdcl7MoT5XB37bTkg==
653+
dependencies:
654+
"@types/node" "*"
655+
playwright-core "1.33.0"
656+
optionalDependencies:
657+
fsevents "2.3.2"
658+
649659
"@pnpm/network.ca-file@^1.0.1":
650660
version "1.0.2"
651661
resolved "https://registry.yarnpkg.com/@pnpm/network.ca-file/-/network.ca-file-1.0.2.tgz#2ab05e09c1af0cdf2fcf5035bea1484e222f7983"
@@ -3410,6 +3420,11 @@ fs.realpath@^1.0.0:
34103420
resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
34113421
integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
34123422

3423+
fsevents@2.3.2, fsevents@^2.3.2, fsevents@~2.3.2:
3424+
version "2.3.2"
3425+
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
3426+
integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
3427+
34133428
fsevents@^1.2.7:
34143429
version "1.2.13"
34153430
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.13.tgz#f325cb0455592428bcf11b383370ef70e3bfcc38"
@@ -3418,11 +3433,6 @@ fsevents@^1.2.7:
34183433
bindings "^1.5.0"
34193434
nan "^2.12.1"
34203435

3421-
fsevents@^2.3.2, fsevents@~2.3.2:
3422-
version "2.3.2"
3423-
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
3424-
integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
3425-
34263436
function-bind@^1.1.1:
34273437
version "1.1.1"
34283438
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -6122,6 +6132,11 @@ pkg-dir@^4.2.0:
61226132
dependencies:
61236133
find-up "^4.0.0"
61246134

6135+
playwright-core@1.33.0:
6136+
version "1.33.0"
6137+
resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.33.0.tgz#269efe29a927cd6d144d05f3c2d2f72bd72447a1"
6138+
integrity sha512-aizyPE1Cj62vAECdph1iaMILpT0WUDCq3E6rW6I+dleSbBoGbktvJtzS6VHkZ4DKNEOG9qJpiom/ZxO+S15LAw==
6139+
61256140
plugin-error@^1.0.1:
61266141
version "1.0.1"
61276142
resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-1.0.1.tgz#77016bd8919d0ac377fdcdd0322328953ca5781c"

0 commit comments

Comments
 (0)