jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: add pwright

Browse source
This commit is contained in:
nick-delirium 2025-02-25 15:10:24 +01:00
parent d85f63c72e
commit 264f35cc9e
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
2 changed files with 59 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
frontend/app/components/Session_/UnitStepsModal/index.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { TYPES, Input, Click, Location } from 'App/types/session/event'
import { CodeBlock, CopyButton } from "UI";
import React from 'react';
import { TYPES, Input, Click, Location } from 'App/types/session/event';
import { CodeBlock, CopyButton } from 'UI';
import { Segmented } from 'antd';
interface Props {
@ -10,34 +10,62 @@ interface Props {
}
function UnitStepsModal({ events, width, height }: Props) {
const [eventStr, setEventStr] = React.useState('')
const [activeFramework, setActiveFramework] = React.useState('puppeteer')
const [eventStr, setEventStr] = React.useState('');
const [activeFramework, setActiveFramework] = React.useState('puppeteer');
React.useEffect(() => {
const userEventTypes = [TYPES.LOCATION, TYPES.CLICK, TYPES.INPUT]
const userEventTypes = [TYPES.LOCATION, TYPES.CLICK, TYPES.INPUT];
const puppeteerEvents = {
[TYPES.LOCATION]: (event: Location) => `await page.goto('${event.url}')`,
[TYPES.CLICK]: (event: Click) => `await page.locator('${event.selector.length ? event.selector : event.label}').click()`,
[TYPES.INPUT]: (event: Input) => `await page.locator('${event.label}').type('Test Input')`,
'screen': () => `await page.setViewport({width: ${width}, height: ${height})`
}
[TYPES.CLICK]: (event: Click) =>
`await page.locator('${
event.selector.length ? event.selector : event.label
}').click()`,
[TYPES.INPUT]: (event: Input) =>
`await page.locator('${event.label}').type('Test Input')`,
screen: () =>
`await page.setViewport({width: ${width}, height: ${height})`,
};
const cypressEvents = {
[TYPES.LOCATION]: (event: Location) => `cy.visit('${event.url}')`,
[TYPES.CLICK]: (event: Click) => `cy.get('${event.selector.length ? event.selector : event.label}').click()`,
[TYPES.INPUT]: (event: Input) => `cy.get('${event.label}').type('Test Input')`,
'screen': () => `cy.viewport(${width}, ${height})`
}
const usedCollection = activeFramework === 'puppeteer' ? puppeteerEvents : cypressEvents
[TYPES.CLICK]: (event: Click) =>
`cy.get('${
event.selector.length ? event.selector : event.label
}').click()`,
[TYPES.INPUT]: (event: Input) =>
`cy.get('${event.label}').type('Test Input')`,
screen: () => `cy.viewport(${width}, ${height})`,
};
const playWrightEvents = {
[TYPES.LOCATION]: (event: Location) => `await page.goto('${event.url}')`,
[TYPES.CLICK]: (event: Click) =>
event.selector.length
? `await page.locator('${event.selector}').click()`
: `await page.getByText('${event.label}').click()`,
[TYPES.INPUT]: (event: Input) =>
`await page.getByLabel('${event.label}').fill('Test Input')`,
screen: () =>
`await page.setViewport({width: ${width}, height: ${height})`,
};
let finalScript = ''
const collections = {
puppeteer: puppeteerEvents,
cypress: cypressEvents,
playwright: playWrightEvents,
}
// @ts-ignore
const usedCollection = collections[activeFramework];
let finalScript = '';
events.forEach((ev) => {
if (userEventTypes.includes(ev.type)) {
finalScript += usedCollection[ev.type](ev)
finalScript += '\n'
finalScript += usedCollection[ev.type](ev);
finalScript += '\n';
}
})
setEventStr(finalScript)
}, [events, activeFramework])
});
setEventStr(finalScript);
}, [events, activeFramework]);
return (
<div className={'bg-white h-full flex flex-col items-start gap-2'}>
@ -45,12 +73,18 @@ function UnitStepsModal({ events, width, height }: Props) {
<Segmented
options={[
{ label: 'Puppeteer', value: 'puppeteer' },
{ label: 'Cypress', value: 'cypress' }
{ label: 'Cypress', value: 'cypress' },
{ label: 'Playwright', value: 'playwright' },
]}
value={activeFramework}
onChange={(value) => setActiveFramework(value)}
/>
<CopyButton size={'middle'} variant={'default'} content={eventStr} className={'capitalize font-medium text-neutral-400'} />
<CopyButton
size={'middle'}
variant={'default'}
content={eventStr}
className={'capitalize font-medium text-neutral-400'}
/>
</div>
<div className={'w-full'}>
<CodeBlock code={eventStr} language={'javascript'} />
@ -59,4 +93,4 @@ function UnitStepsModal({ events, width, height }: Props) {
);
}
export default UnitStepsModal;
export default UnitStepsModal;

2
frontend/app/types/session/event.ts
View file

@ -170,7 +170,7 @@ export class Touch extends Event {
}
}
class Input extends Event {
export class Input extends Event {
readonly type = INPUT;
readonly name = 'Input';
readonly hesitation: number = 0;