Skip to content

Commit dabb009

Browse files
soloviovmaxsoloviovmax-ke
soloviovmax
and
soloviovmax-ke
authored
Open links in the main browser (#14)
* Google analytics init * Modify analytics ID injection in HTML, and improve server setup for dynamic port assignment. * Remove analytics ID from .gitignore * Feature/DOcument PiP * Favicon added * Removed '.locator("#stepsList li:last-of-type")' tooltip from the panel * Update package-lock.json to version 0.0.5 * Open links in the main browser * Open links in main browser build fix --------- Co-authored-by: Max Soloviov <max.soloviov@keenethics.com>
1 parent c11516a commit dabb009

23 files changed

+456
-310
lines changed

‎index.html‎

Lines changed: 1 addition & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -4,117 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Cyborg Test UI</title>
7-
<style>
8-
body {
9-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10-
background-color: #f9f9f9;
11-
margin: 0;
12-
padding: 0;
13-
color: #333;
14-
}
15-
#container {
16-
max-width: 280px;
17-
margin: 10px auto;
18-
background-color: white;
19-
border-radius: 8px;
20-
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
21-
padding: 15px;
22-
}
23-
h3, h4 {
24-
margin: 0;
25-
padding: 0;
26-
}
27-
h3 {
28-
color: #2c3e50;
29-
margin-bottom: 15px;
30-
font-size: 16px;
31-
word-wrap: break-word;
32-
}
33-
h4 {
34-
color: #7f8c8d;
35-
margin-bottom: 5px;
36-
font-size: 14px;
37-
}
38-
ol {
39-
padding-left: 20px;
40-
margin-top: 5px;
41-
}
42-
li {
43-
margin-bottom: 8px;
44-
font-size: 14px;
45-
line-height: 1.4;
46-
}
47-
button {
48-
display: inline-block;
49-
width: 100%;
50-
padding: 10px;
51-
margin: 5px 0;
52-
border: none;
53-
border-radius: 4px;
54-
cursor: pointer;
55-
font-weight: 600;
56-
transition: background-color 0.2s;
57-
}
58-
.btn-success {
59-
background-color: #2ecc71;
60-
color: white;
61-
}
62-
.btn-success:hover {
63-
background-color: #27ae60;
64-
}
65-
.btn-danger {
66-
background-color: #e74c3c;
67-
color: white;
68-
}
69-
.btn-danger:hover {
70-
background-color: #c0392b;
71-
}
72-
input {
73-
width: 100%;
74-
padding: 10px;
75-
margin: 5px 0;
76-
border: 1px solid #ddd;
77-
border-radius: 4px;
78-
box-sizing: border-box;
79-
}
80-
input:focus {
81-
outline: none;
82-
border-color: #3498db;
83-
}
84-
.divider {
85-
height: 1px;
86-
background-color: #eee;
87-
margin: 15px 0;
88-
}
89-
.step-pass {
90-
color: #2ecc71;
91-
}
92-
.step-fail {
93-
color: #e74c3c;
94-
}
95-
.footer {
96-
margin-top: 15px;
97-
text-align: center;
98-
display: flex;
99-
justify-content: center;
100-
flex-wrap: wrap;
101-
}
102-
.footer a {
103-
color: #7f8c8d;
104-
margin: 0 10px;
105-
text-decoration: none;
106-
font-size: 12px;
107-
}
108-
.footer a:hover {
109-
color: #3498db;
110-
}
111-
.header {
112-
display: flex;
113-
justify-content: center;
114-
align-items: center;
115-
padding: 15px 10px;
116-
}
117-
</style>
7+
<link rel="stylesheet" href="/src/ui/styles/general.css">
1188
</head>
1199
<body>
12010
<div id="root"></div>

‎package-lock.json‎

Lines changed: 11 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@cyborgtests/test",
3-
"version": "0.0.4",
3+
"version": "0.0.6",
44
"description": "Powerfull extension for Playwright, that allows you to include manual verification steps in your automated test flow",
55
"main": "dist/index.umd.js",
66
"module": "dist/index.es.js",
@@ -52,5 +52,8 @@
5252
"package.json",
5353
"package-lock.json",
5454
"src"
55-
]
55+
],
56+
"dependencies": {
57+
"os": "^0.1.2"
58+
}
5659
}

‎public/favicon.ico‎

40.7 KB
Binary file not shown.

‎public/favicon.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎src/test.ts‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
import { chromium } from "playwright";
88
import { config } from "./config";
99
import { startServer } from "./utils/server";
10+
import openInDefaultBrowser from "./utils/openInDefaultBrowser";
1011

1112
class TestFailedError extends Error {
1213
constructor(message: string) {
@@ -35,6 +36,14 @@ const test = pwTest.extend<{
3536
});
3637

3738
await tcPage.goto(`http://localhost:${config.uiPort}`);
39+
40+
await tcPage.exposeFunction('openInMainBrowser', (link: string) => {
41+
openInDefaultBrowser(link);
42+
});
43+
await tcPage.evaluate(() => {
44+
(window as any).testUtils.openInMainBrowser = (window as any).openInMainBrowser;
45+
});
46+
3847
await tcPage.bringToFront();
3948

4049
await use({
@@ -67,13 +76,16 @@ const test = pwTest.extend<{
6776

6877
await testControl.page.pause();
6978

70-
const lastStep = await testControl.page
71-
.locator("#stepsList li:last-of-type")
72-
.textContent();
73-
7479
// If last step failed, throw error
75-
if (lastStep!.includes("❌")) {
76-
throw new TestFailedError(lastStep as string);
80+
const hasFailed = await testControl.page.evaluate(() => {
81+
if ((window as any).testUtils.hasFailed) {
82+
delete (window as any).testUtils.hasFailed;
83+
return true;
84+
}
85+
return false;
86+
});
87+
if (hasFailed) {
88+
throw new TestFailedError(stepName as string);
7789
}
7890
},
7991
{ box: true }

‎src/types/custom.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module '*.svg' {
2+
const content: string;
3+
export default content;
4+
}

‎src/ui/components/App.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { Fragment, useEffect } from 'react';
2+
import Footer from './Footer';
3+
import Header from './Header';
4+
import TestControlPanel from './TestControlPanel';
5+
import OpenDocumentPIP from './OpenDocumentPIP';
6+
import { TestStoreProvider } from '../store/TestStore';
7+
8+
// Add TypeScript interface for Document PiP
9+
declare global {
10+
interface Window {
11+
documentPictureInPicture: {
12+
requestWindow(options: { width: string; height: string }): Promise<Window>;
13+
};
14+
}
15+
}
16+
17+
export default function App() {
18+
return (
19+
<TestStoreProvider>
20+
<Header />
21+
<TestControlPanel />
22+
<Footer />
23+
<OpenDocumentPIP />
24+
</TestStoreProvider>
25+
);
26+
}

‎src/ui/components/Content.tsx‎

Lines changed: 0 additions & 95 deletions
This file was deleted.

‎src/ui/components/Footer.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import { trackEvent } from '../../utils/analytics';
3+
4+
export default function Footer() {
5+
const trackButtonClick = (buttonName: string) => {
6+
trackEvent(`app_${buttonName}_click`);
7+
};
8+
9+
return (
10+
<footer className="footer">
11+
<button
12+
className="footer-link"
13+
onClick={() => {
14+
trackButtonClick('github');
15+
(window as any).openInMainBrowser('https://github.com/CyborgTests/cyborg-test');
16+
}}
17+
>
18+
Github
19+
</button>
20+
<button
21+
className="footer-link"
22+
onClick={() => {
23+
trackButtonClick('discord');
24+
(window as any).openInMainBrowser('https://discord.com/invite/rNZCd3MHDx');
25+
}}
26+
>
27+
Discord
28+
</button>
29+
</footer>
30+
);
31+
}

0 commit comments

Comments
 (0)