open ui mode from dev server

This commit is contained in:
Simon Knott 2024-10-22 16:18:46 +02:00
parent 50f11a8936
commit 39a7f54d73
4 changed files with 15 additions and 4 deletions

View file

@ -125,7 +125,13 @@ export async function installRootRedirect(server: HttpServer, traceUrls: string[
for (const reporter of options.reporter || []) for (const reporter of options.reporter || [])
params.append('reporter', reporter); params.append('reporter', reporter);
const urlPath = `./trace/${options.webApp || 'index.html'}?${params.toString()}`; let urlPath = `./trace/${options.webApp || 'index.html'}?${params.toString()}`;
if (process.env.PW_WEB_DEV_SERVER) {
params.append('testServerPort', '' + server.port());
urlPath = `http://localhost:${process.env.PW_WEB_DEV_SERVER}/${options.webApp || 'index.html'}?${params.toString()}`;
}
server.routePath('/', (_, response) => { server.routePath('/', (_, response) => {
response.statusCode = 302; response.statusCode = 302;
response.setHeader('Location', urlPath); response.setHeader('Location', urlPath);

View file

@ -48,8 +48,10 @@ const xtermDataSource: XtermDataSource = {
const searchParams = new URLSearchParams(window.location.search); const searchParams = new URLSearchParams(window.location.search);
const guid = searchParams.get('ws'); const guid = searchParams.get('ws');
const testServerPort = searchParams.get('testServerPort') ?? window.location.port;
const wsURL = new URL(`../${guid}`, window.location.toString()); const wsURL = new URL(`../${guid}`, window.location.toString());
wsURL.protocol = (window.location.protocol === 'https:' ? 'wss:' : 'ws:'); wsURL.protocol = (window.location.protocol === 'https:' ? 'wss:' : 'ws:');
wsURL.port = testServerPort;
const queryParams = { const queryParams = {
args: searchParams.getAll('arg'), args: searchParams.getAll('arg'),
grep: searchParams.get('grep') || undefined, grep: searchParams.get('grep') || undefined,
@ -440,7 +442,7 @@ export const UIModeView: React.FC<{}> = ({
sidebar={<div className='vbox ui-mode-sidebar'> sidebar={<div className='vbox ui-mode-sidebar'>
<Toolbar noShadow={true} noMinHeight={true}> <Toolbar noShadow={true} noMinHeight={true}>
<img src='playwright-logo.svg' alt='Playwright logo' /> <img src='playwright-logo.svg' alt='Playwright logo' />
<div className='section-title'>Playwright</div> <div className='section-title'>Claywright</div>
<ToolbarButton icon='refresh' title='Reload' onClick={() => reloadTests()} disabled={isRunningTest || isLoading}></ToolbarButton> <ToolbarButton icon='refresh' title='Reload' onClick={() => reloadTests()} disabled={isRunningTest || isLoading}></ToolbarButton>
<div style={{ position: 'relative' }}> <div style={{ position: 'relative' }}>
<ToolbarButton icon={'terminal'} title={'Toggle output — ' + (isMac ? '⌃`' : 'Ctrl + `')} toggled={isShowingOutput} onClick={() => { setIsShowingOutput(!isShowingOutput); }} /> <ToolbarButton icon={'terminal'} title={'Toggle output — ' + (isMac ? '⌃`' : 'Ctrl + `')} toggled={isShowingOutput} onClick={() => { setIsShowingOutput(!isShowingOutput); }} />

View file

@ -26,6 +26,9 @@ export default defineConfig({
react(), react(),
bundle() bundle()
], ],
define: {
'process.env': {},
},
resolve: { resolve: {
alias: { alias: {
'@injected': path.resolve(__dirname, '../playwright-core/src/server/injected'), '@injected': path.resolve(__dirname, '../playwright-core/src/server/injected'),

View file

@ -307,10 +307,10 @@ steps.push({
}); });
// web packages dev server // web packages dev server
if (watchMode) { if (process.env.PW_WEB_DEV_SERVER) {
steps.push({ steps.push({
command: 'npx', command: 'npx',
args: ['vite', '--port', '5781'], args: ['vite', '--port', process.env.PW_WEB_DEV_SERVER],
shell: true, shell: true,
cwd: path.join(__dirname, '..', '..', 'packages', 'trace-viewer'), cwd: path.join(__dirname, '..', '..', 'packages', 'trace-viewer'),
concurrent: true, concurrent: true,