diff --git a/web/src/components/ResourceCard/TestCard.tsx b/web/src/components/ResourceCard/TestCard.tsx
index eb40a447bd..2a49f01ad5 100644
--- a/web/src/components/ResourceCard/TestCard.tsx
+++ b/web/src/components/ResourceCard/TestCard.tsx
@@ -43,7 +43,7 @@ const TestCard = ({onEdit, onDelete, onDuplicate, onRun, onViewAll, test}: IProp
{test.name}
- {test.trigger.method} • {test.trigger.entryPoint}
+ {test.trigger.method} {test.trigger.entryPoint && `• ${test.trigger.entryPoint}`}
diff --git a/web/src/components/RunDetailAutomate/RunDetailAutomate.tsx b/web/src/components/RunDetailAutomate/RunDetailAutomate.tsx
index b9d2d846b4..41e26d711f 100644
--- a/web/src/components/RunDetailAutomate/RunDetailAutomate.tsx
+++ b/web/src/components/RunDetailAutomate/RunDetailAutomate.tsx
@@ -3,14 +3,42 @@ import {useState} from 'react';
import RunDetailAutomateDefinition from 'components/RunDetailAutomateDefinition';
import RunDetailAutomateMethods from 'components/RunDetailAutomateMethods';
import CliCommand from 'components/RunDetailAutomateMethods/methods/CLICommand';
+import Cypress from 'components/RunDetailAutomateMethods/methods/Cypress';
import DeepLink from 'components/RunDetailAutomateMethods/methods/DeepLink';
import {CLI_RUNNING_TESTS_URL} from 'constants/Common.constants';
+import {TriggerTypes} from 'constants/Test.constants';
import Test from 'models/Test.model';
import TestRun from 'models/TestRun.model';
import {useVariableSet} from 'providers/VariableSet';
import {ResourceType} from 'types/Resource.type';
import * as S from './RunDetailAutomate.styled';
+function getMethods(triggerType: TriggerTypes) {
+ switch (triggerType) {
+ case TriggerTypes.cypress:
+ return [
+ {
+ id: 'cypress',
+ label: 'Cypress',
+ component: Cypress,
+ },
+ ];
+ default:
+ return [
+ {
+ id: 'cli',
+ label: 'CLI',
+ component: CliCommand,
+ },
+ {
+ id: 'deeplink',
+ label: 'Deep Link',
+ component: DeepLink,
+ },
+ ];
+ }
+}
+
interface IProps {
test: Test;
run: TestRun;
@@ -34,26 +62,21 @@ const RunDetailAutomate = ({test, run}: IProps) => {
- ),
- },
- {
- id: 'deeplink',
- label: 'Deep Link',
- children: ,
- },
- ]}
+ methods={getMethods(test.trigger.type).map(({id, label, component: Component}) => ({
+ id,
+ label,
+ children: (
+
+ ),
+ }))}
/>
diff --git a/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx b/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx
index 1abbebe5de..d1f37a4e73 100644
--- a/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx
+++ b/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx
@@ -39,7 +39,13 @@ const RunDetailAutomateDefinition = ({id, version, resourceType, fileName, onFil
value={definition}
language="yaml"
actions={
- } onClick={onDownload} type="primary">
+ }
+ onClick={onDownload}
+ size="small"
+ type="primary"
+ >
Download File
}
diff --git a/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.tsx b/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.tsx
index a1a4a430bb..19827a2cf0 100644
--- a/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.tsx
+++ b/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.tsx
@@ -14,6 +14,14 @@ interface IMethodProps {
children: React.ReactNode;
}
+export interface IMethodChildrenProps {
+ docsUrl?: string;
+ fileName?: string;
+ id: string;
+ resourceType: ResourceType;
+ variableSetId?: string;
+}
+
const RunDetailAutomateMethods = ({resourceType, methods = []}: IProps) => {
const [query, updateQuery] = useSearchParams();
@@ -21,7 +29,7 @@ const RunDetailAutomateMethods = ({resourceType, methods = []}: IProps) => {
Running Techniques
- Methods to automate the running of this {resourceType}
+ Methods to automate the running of this {resourceType.slice(0, -1)}
{
+const CLiCommand = ({id, variableSetId, fileName = '', resourceType, docsUrl}: IMethodChildrenProps) => {
const {command, onGetCommand} = useCliCommand();
return (
diff --git a/web/src/components/RunDetailAutomateMethods/methods/Cypress/Cypress.styled.ts b/web/src/components/RunDetailAutomateMethods/methods/Cypress/Cypress.styled.ts
new file mode 100644
index 0000000000..96afc21ad8
--- /dev/null
+++ b/web/src/components/RunDetailAutomateMethods/methods/Cypress/Cypress.styled.ts
@@ -0,0 +1,22 @@
+import {Typography} from 'antd';
+import styled from 'styled-components';
+
+export const Title = styled(Typography.Title).attrs({
+ level: 3,
+})`
+ && {
+ font-size: ${({theme}) => theme.size.md};
+ font-weight: 600;
+ margin-bottom: 16px;
+ }
+`;
+
+export const TitleContainer = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+`;
+
+export const Container = styled.div`
+ margin: 16px 0;
+`;
diff --git a/web/src/components/RunDetailAutomateMethods/methods/Cypress/Cypress.tsx b/web/src/components/RunDetailAutomateMethods/methods/Cypress/Cypress.tsx
new file mode 100644
index 0000000000..f12bc98e19
--- /dev/null
+++ b/web/src/components/RunDetailAutomateMethods/methods/Cypress/Cypress.tsx
@@ -0,0 +1,22 @@
+import {Typography} from 'antd';
+import {FramedCodeBlock} from 'components/CodeBlock';
+import {CypressCodeSnippet} from 'constants/Automate.constants';
+import Test from 'models/Test.model';
+import * as S from './Cypress.styled';
+import {IMethodChildrenProps} from '../../RunDetailAutomateMethods';
+
+interface IProps extends IMethodChildrenProps {
+ test: Test;
+}
+
+const Cypress = ({test}: IProps) => (
+
+
+ Cypress Integration
+
+ The code snippet below enables you to run this test via a cypress run.
+
+
+);
+
+export default Cypress;
diff --git a/web/src/components/RunDetailAutomateMethods/methods/Cypress/index.ts b/web/src/components/RunDetailAutomateMethods/methods/Cypress/index.ts
new file mode 100644
index 0000000000..1753fd7c96
--- /dev/null
+++ b/web/src/components/RunDetailAutomateMethods/methods/Cypress/index.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export {default} from './Cypress';
diff --git a/web/src/components/RunDetailAutomateMethods/methods/DeepLink/DeepLink.tsx b/web/src/components/RunDetailAutomateMethods/methods/DeepLink/DeepLink.tsx
index 98c2d7af9d..29d1934df9 100644
--- a/web/src/components/RunDetailAutomateMethods/methods/DeepLink/DeepLink.tsx
+++ b/web/src/components/RunDetailAutomateMethods/methods/DeepLink/DeepLink.tsx
@@ -5,11 +5,11 @@ import TestRun from 'models/TestRun.model';
import Controls from './Controls';
import * as S from './DeepLink.styled';
import useDeepLink from './hooks/useDeepLink';
+import {IMethodChildrenProps} from '../../RunDetailAutomateMethods';
-interface IProps {
+interface IProps extends IMethodChildrenProps {
test: Test;
run: TestRun;
- variableSetId?: string;
}
const DeepLink = ({test, variableSetId, run: {variableSet}}: IProps) => {
@@ -32,7 +32,7 @@ const DeepLink = ({test, variableSetId, run: {variableSet}}: IProps) => {
maxHeight="80px"
actions={
-
+
Try it
diff --git a/web/src/components/RunDetailLayout/HeaderLeft.tsx b/web/src/components/RunDetailLayout/HeaderLeft.tsx
index 79ca222300..e719fd5c3b 100644
--- a/web/src/components/RunDetailLayout/HeaderLeft.tsx
+++ b/web/src/components/RunDetailLayout/HeaderLeft.tsx
@@ -44,7 +44,7 @@ const HeaderLeft = ({name, triggerType, origin}: IProps) => {
const description = useMemo(() => {
return (
<>
- v{testVersion} • {triggerType} • Ran {createdTimeAgo} • {source && <>Run via {source.toUpperCase()}>}
+ v{testVersion} • {triggerType} • Ran {createdTimeAgo} {source && <>• Run via {source.toUpperCase()}>}
{testSuiteId && !!testSuiteRunId && (
<>
{' '}
diff --git a/web/src/components/RunDetailTriggerResponse/RunDetailTriggerData.tsx b/web/src/components/RunDetailTriggerResponse/RunDetailTriggerData.tsx
index 8557419d62..ba639dfd40 100644
--- a/web/src/components/RunDetailTriggerResponse/RunDetailTriggerData.tsx
+++ b/web/src/components/RunDetailTriggerResponse/RunDetailTriggerData.tsx
@@ -6,9 +6,11 @@ import TestRunAnalyticsService from 'services/Analytics/TestRunAnalytics.service
import ResponseVariableSet from './ResponseVariableSet';
import * as S from './RunDetailTriggerResponse.styled';
import {IPropsComponent} from './RunDetailTriggerResponseFactory';
+import ResponseMetadata from './ResponseMetadata';
const TABS = {
VariableSet: 'variable-set',
+ Metadata: 'metadata',
} as const;
const RunDetailTriggerData = ({state, triggerTime = 0}: IPropsComponent) => {
@@ -39,6 +41,9 @@ const RunDetailTriggerData = ({state, triggerTime = 0}: IPropsComponent) => {
+
+
+
diff --git a/web/src/constants/Automate.constants.ts b/web/src/constants/Automate.constants.ts
new file mode 100644
index 0000000000..1ba009e8a8
--- /dev/null
+++ b/web/src/constants/Automate.constants.ts
@@ -0,0 +1,26 @@
+export function CypressCodeSnippet(testName: string) {
+ return `import Tracetest from '@tracetest/cypress';
+
+const TRACETEST_API_TOKEN = Cypress.env('TRACETEST_API_TOKEN') || '';
+const tracetest = Tracetest();
+
+describe('Cypress Test', () => {
+ before(done => {
+ tracetest.configure(TRACETEST_API_TOKEN).then(() => done());
+ });
+
+ beforeEach(() => {
+ cy.visit('/', {
+ onBeforeLoad: win => tracetest.capture(win.document),
+ });
+ });
+
+ afterEach(done => {
+ tracetest.runTest('').then(() => done());
+ });
+
+ it('${testName}', () => {
+ // ...cy commands
+ });
+});`;
+}