[frontend/e2e] Navigation on groupings and malware analyses (#7378)

opencti-platform/opencti-front/playwright.config.ts

@@ -46,7 +46,7 @@ export default defineConfig({
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
     screenshot: 'only-on-failure',
-    video: 'on-first-retry',
+    video: 'retain-on-failure',
     ignoreHTTPSErrors: true,
   },
   expect: { timeout: 60000 },

opencti-platform/opencti-front/src/private/components/analyses/MalwareAnalyses.tsx

@@ -167,6 +167,7 @@ const MalwareAnalyses: FunctionComponent = () => {
     <ExportContextProvider>
       <Breadcrumbs variant="list" elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('Malware analyses'), current: true }]} />
       {queryRef && (
+      <div data-testid='malware-analyses-page'>
         <DataTable
           dataColumns={dataColumns}
           resolvePath={(data: MalwareAnalysesLines_data$data) => data.malwareAnalyses?.edges?.map((n) => n?.node)}
@@ -177,11 +178,12 @@ const MalwareAnalyses: FunctionComponent = () => {
           lineFragment={malwareAnalysisFragment}
           exportContext={{ entity_type: 'Malware-Analysis' }}
           createButton={isFABReplaced && (
-            <Security needs={[KNOWLEDGE_KNUPDATE]}>
-              <MalwareAnalysisCreation paginationOptions={queryPaginationOptions} />
-            </Security>
+          <Security needs={[KNOWLEDGE_KNUPDATE]}>
+            <MalwareAnalysisCreation paginationOptions={queryPaginationOptions} />
+          </Security>
           )}
         />
+      </div>
       )}
       {!isFABReplaced && (
         <Security needs={[KNOWLEDGE_KNUPDATE]}>

opencti-platform/opencti-front/src/private/components/analyses/groupings/Grouping.jsx

@@ -31,7 +31,7 @@ const GroupingComponent = ({ grouping }) => {
   const { canEdit } = useGetCurrentUserAccessRight(grouping.currentUserAccessRight);
 
   return (
-    <div data-testid="grouping-details-page">
+    <div data-testid='grouping-details-page'>
       <Grid
         container={true}
         spacing={3}

opencti-platform/opencti-front/src/private/components/analyses/groupings/GroupingKnowledge.jsx

@@ -151,6 +151,7 @@ class GroupingKnowledgeComponent extends Component {
       <div
         className={classes.container}
         id={location.pathname.includes('matrix') ? 'parent' : 'container'}
+        data-testid='groupings-knowledge'
       >
         {mode !== 'graph' && (
           <ContainerHeader

opencti-platform/opencti-front/src/private/components/analyses/malware_analyses/MalwareAnalysisDetails.tsx

@@ -76,7 +76,9 @@ MalwareAnalysisDetailsProps
     malwareAnalysisFragment,
   );
   return (
-    <div style={{ height: '100%' }}>
+    <div style={{ height: '100%' }}
+      data-testid='malware-analyses-details-page'
+    >
       <Typography variant="h4" gutterBottom={true}>
         {t_i18n('Details')}
       </Typography>

opencti-platform/opencti-front/src/private/components/common/stix_core_objects/StixCoreObjectHistory.jsx

@@ -41,6 +41,7 @@ class StixCoreObjectHistory extends Component {
         container={true}
         spacing={3}
         classes={{ container: classes.gridContainer }}
+        data-testid='sco-history-content'
       >
         <Grid
           item

opencti-platform/opencti-front/tests_e2e/enableReferences/addReportObservable.spec.ts

@@ -123,7 +123,7 @@ test('Add and remove observable from Observables tab of a Report as Admin user',
   await reportPage.getCreateReportButton().click();
   await reportPage.getItemFromList('Test add observable e2e').click();
   await expect(reportDetailsPage.getPage()).toBeVisible();
-  await reportDetailsPage.goToObservablesTab();
+  await reportDetailsPage.tabs.goToObservablesTab();
   await expect(containerObservablesPage.getPage()).toBeVisible();
   await containerObservablesPage.getAddObservableListButton().click();
   await containerAddObservablesPage.createNewIPV4Observable('8.8.8.8');
@@ -140,7 +140,7 @@ test('Add and remove observable from Observables tab of a Report as Admin user',
 
   await leftBarPage.clickOnMenu('Analyses', 'Reports');
   await reportPage.getItemFromList('Test add observable e2e').click();
-  await reportDetailsPage.goToObservablesTab();
+  await reportDetailsPage.tabs.goToObservablesTab();
   await expect(containerObservablesPage.getPage()).toBeVisible();
   await containerObservablesPage.getAddObservableListButton().click();
   await expect(containerAddObservablesPage.getObservable('IPv4 address 8.8.8.8')).toBeVisible();
@@ -173,7 +173,7 @@ test.describe('Add and remove observable from Observables tab of a Report as noB
     await reportPage.getCreateReportButton().click();
     await reportPage.getItemFromList('Test add observable e2e 2').click();
     await expect(reportDetailsPage.getPage()).toBeVisible();
-    await reportDetailsPage.goToObservablesTab();
+    await reportDetailsPage.tabs.goToObservablesTab();
     await expect(containerObservablesPage.getPage()).toBeVisible();
     await containerObservablesPage.getAddObservableListButton().click();
     await containerAddObservablesPage.createNewIPV4Observable('9.9.9.9');
@@ -191,7 +191,7 @@ test.describe('Add and remove observable from Observables tab of a Report as noB
 
     await leftBarPage.clickOnMenu('Analyses', 'Reports');
     await reportPage.getItemFromList('Test add observable e2e 2').click();
-    await reportDetailsPage.goToObservablesTab();
+    await reportDetailsPage.tabs.goToObservablesTab();
     await expect(containerObservablesPage.getPage()).toBeVisible();
     await containerObservablesPage.getAddObservableListButton().click();
     await expect(containerAddObservablesPage.getObservable('IPv4 address 9.9.9.9')).toBeVisible();

opencti-platform/opencti-front/tests_e2e/groupings/createGrouping.spec.ts

@@ -11,7 +11,7 @@ test('Create a new grouping', async ({ page }) => {
   const stixDomainObjectContentTab = new StixDomainObjectContentTabPage(page);
 
   // go to groupings
-  await page.goto('/dashboard/analyses/groupings');
+  await groupingsPage.goto();
   await expect(groupingsPage.getPage()).toBeVisible();
   // add a new grouping
   await groupingsPage.addNew();
@@ -20,7 +20,7 @@ test('Create a new grouping', async ({ page }) => {
   await groupingForm.submit();
   // open it
   await groupingsPage.getItemFromList('Test grouping e2e').click();
-  await expect(groupingDetails.getGroupingDetailsPage()).toBeVisible();
+  await expect(groupingDetails.getPage()).toBeVisible();
   await expect(groupingDetails.getTitle('Test grouping e2e')).toBeVisible();
   // add content
   await groupingDetails.goToTab('Content');

opencti-platform/opencti-front/tests_e2e/model/MalwareAnalyses.pageModel.ts

@@ -0,0 +1,30 @@
+import { Page } from '@playwright/test';
+import LeftBarPage from './menu/leftBar.pageModel';
+
+export default class MalwareAnalysesPage {
+  pageUrl = '/dashboard/analyses/malware_analyses';
+
+  constructor(private page: Page) {
+  }
+
+  /**
+     * Reload the page (like F5), mostly used once on test start.
+     * When possible please use navigateFromMenu instead it's faster.
+     */
+  async goto() {
+    await this.page.goto(this.pageUrl);
+  }
+
+  async navigateFromMenu() {
+    const leftBarPage = new LeftBarPage(this.page);
+    await leftBarPage.open();
+    await leftBarPage.clickOnMenu('Analyses', 'Malware analyses');
+  }
+  getPage() {
+    return this.page.getByTestId('malware-analyses-page');
+  }
+
+  getItemFromList(name: string) {
+    return this.page.getByLabel(name);
+  }
+}

opencti-platform/opencti-front/tests_e2e/model/MalwareAnalysesDetails.pageModel.ts

@@ -0,0 +1,11 @@
+import { Page } from '@playwright/test';
+import SDOTabs from './SDOTabs.pageModel';
+
+export default class MalwareAnalysesDetailsPage {
+  tabs = new SDOTabs(this.page);
+  constructor(private page: Page) {}
+
+  getPage() {
+    return this.page.getByTestId('malware-analyses-details-page');
+  }
+}

opencti-platform/opencti-front/tests_e2e/model/SDOTabs.pageModel.ts

@@ -0,0 +1,36 @@
+import { Page } from '@playwright/test';
+
+/**
+ * Common page for all components that have Overview/Knowledge/...etc tabs (in knowledge)
+ */
+export default class SDOTabs {
+  constructor(private page: Page) {}
+
+  goToOverviewTab() {
+    return this.page.getByRole('tab', { name: 'Overview' }).click();
+  }
+
+  goToKnowledgeTab() {
+    return this.page.getByRole('tab', { name: 'Knowledge' }).click();
+  }
+
+  goToEntitiesTab() {
+    return this.page.getByRole('tab', { name: 'Entities' }).click();
+  }
+
+  goToContentTab() {
+    return this.page.getByRole('tab', { name: 'Content' }).click();
+  }
+
+  goToDataTab() {
+    return this.page.getByRole('tab', { name: 'Data' }).click();
+  }
+
+  goToObservablesTab() {
+    return this.page.getByRole('tab', { name: 'Observables' }).click();
+  }
+
+  goToHistoryTab() {
+    return this.page.getByRole('tab', { name: 'History' }).click();
+  }
+}

opencti-platform/opencti-front/tests_e2e/model/StixCoreObjectHistoryTab.pageModel.ts

@@ -0,0 +1,10 @@
+import { Page } from '@playwright/test';
+
+export default class StixCoreObjectHistoryTab {
+  constructor(private page: Page) {
+  }
+
+  getPage() {
+    return this.page.getByTestId('sco-history-content');
+  }
+}

opencti-platform/opencti-front/tests_e2e/model/grouping.pageModel.ts

@@ -1,8 +1,24 @@
 import { Page } from '@playwright/test';
+import LeftBarPage from './menu/leftBar.pageModel';
 
 export default class GroupingsPage {
+  pageUrl = '/dashboard/analyses/groupings';
   constructor(private page: Page) {}
 
+  /**
+   * Reload the page (like F5), mostly used once on test start.
+   * When possible please use navigateFromMenu instead it's faster.
+   */
+  async goto() {
+    await this.page.goto(this.pageUrl);
+  }
+
+  async navigateFromMenu() {
+    const leftBarPage = new LeftBarPage(this.page);
+    await leftBarPage.open();
+    await leftBarPage.clickOnMenu('Analyses', 'Groupings');
+  }
+
   getPage() {
     return this.page.getByTestId('groupings-page');
   }
@@ -20,7 +36,7 @@ export default class GroupingsPage {
   }
 
   getCreateButton() {
-    return this.page.getByRole('button', { name: 'Create Grouping' })
+    return this.page.getByRole('button', { name: 'Create Grouping' });
   }
 
   getItemFromList(name: string) {

opencti-platform/opencti-front/tests_e2e/model/groupingDetails.pageModel.ts

@@ -1,9 +1,11 @@
 import { Page } from '@playwright/test';
+import SDOTabs from './SDOTabs.pageModel';
 
 export default class GroupingDetailsPage {
+  tabs = new SDOTabs(this.page);
   constructor(private page: Page) {}
 
-  getGroupingDetailsPage() {
+  getPage() {
     return this.page.getByTestId('grouping-details-page');
   }
 

opencti-platform/opencti-front/tests_e2e/model/report.pageModel.ts

@@ -1,13 +1,24 @@
 import { Page } from '@playwright/test';
+import LeftBarPage from './menu/leftBar.pageModel';
 
 export default class ReportPage {
   pageUrl = '/dashboard/analyses/reports';
   constructor(private page: Page) {}
 
+  /**
+   * Reload the page (like F5), mostly used once on test start.
+   * When possible please use navigateFromMenu instead it's faster.
+   */
   async goto() {
     await this.page.goto(this.pageUrl);
   }
 
+  async navigateFromMenu() {
+    const leftBarPage = new LeftBarPage(this.page);
+    await leftBarPage.open();
+    await leftBarPage.clickOnMenu('Analyses', 'Reports');
+  }
+
   getPage() {
     return this.page.getByTestId('report-page');
   }

opencti-platform/opencti-front/tests_e2e/model/reportDetails.pageModel.ts

@@ -1,8 +1,10 @@
 import { Page } from '@playwright/test';
 import AutocompleteFieldPageModel from './field/AutocompleteField.pageModel';
+import SDOTabs from './SDOTabs.pageModel';
 
 export default class ReportDetailsPage {
   labelsSelect = new AutocompleteFieldPageModel(this.page, 'Labels', true);
+  tabs = new SDOTabs(this.page);
 
   constructor(private page: Page) {}
 
@@ -18,34 +20,10 @@ export default class ReportDetailsPage {
     return this.page.getByLabel('Update', { exact: true });
   }
 
-  async goToOverviewTab() {
-    await this.page.getByRole('tab', { name: 'Overview' }).click();
-  }
-
-  goToKnowledgeTab() {
-    return this.page.getByRole('tab', { name: 'Knowledge' }).click();
-  }
-
-  goToEntitiesTab() {
-    return this.page.getByRole('tab', { name: 'Entities' }).click();
-  }
-
-  goToContentTab() {
-    return this.page.getByRole('tab', { name: 'Content' }).click();
-  }
-
-  goToDataTab() {
-    return this.page.getByRole('tab', { name: 'Data' }).click();
-  }
-
   getContentFile(fileName: string) {
     return this.page.getByLabel(fileName);
   }
 
-  goToObservablesTab() {
-    return this.page.getByRole('tab', { name: 'Observables' }).click();
-  }
-
   getTextForHeading(heading: string, text: string) {
     return this.page
       .getByRole('heading', { name: heading })