End to end testing of various posts, sites, and media

.github/workflows/playwright-e2e.yml

@@ -0,0 +1,27 @@
+name: Playwright End to End Tests
+on:
+  push:
+    branches: [ main, master, beta-master ]
+  pull_request:
+    branches: [ main, master, beta-master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright Component and unit tests
+      run: xvfb-run npx playwright test -c playwright-e2e.config.js --headed
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

playwright-e2e.config.js

@@ -0,0 +1,49 @@
+// @ts-check
+const { defineConfig, devices } = require('@playwright/experimental-ct-react');
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+module.exports = defineConfig({
+  testDir: './tests/e2e',
+  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
+  snapshotDir: './__snapshots__',
+  /* Maximum time one test can run for. */
+  timeout: 180_000,
+  expect: { timeout: 180_000 },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    headless: true,
+
+    /* Port to use for Playwright component endpoint. */
+    ctPort: 3100,
+  },
+
+  /* Configure projects for major browsers */
+  // projects: [
+  //   {
+  //     name: 'chromium',
+  //     use: { ...devices['Desktop Chrome'] },
+  //   },
+  //   // {
+  //   //   name: 'firefox',
+  //   //   use: { ...devices['Desktop Firefox'] },
+  //   // },
+  //   // {
+  //   //   name: 'webkit',
+  //   //   use: { ...devices['Desktop Safari'] },
+  //   // },
+  // ],
+});

playwright.config.ts

@@ -29,10 +29,10 @@ export default defineConfig({
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
   },
-  timeout: 60 * 1000,
-  globalTimeout: 60 * 1000,
+  timeout: 120 * 1000,
+  globalTimeout: 120 * 1000,
   expect: {
-    timeout: 60 * 1000,
+    timeout: 120 * 1000,
   },
 
   /* Configure projects for major browsers */

src/components/NavItems/Assistant/AssistantApiHandlers/useAssistantApi.jsx

@@ -89,13 +89,13 @@ export default function assistantApiCalls() {
       }
     }
   }
-  
+
   const callSourceCredibilityService = async (urlList) => {
     return await callAsyncWithNumRetries(
       MAX_NUM_RETRIES,
       async () => {
         if (urlList.length === 0) return null;
-    
+
         let urls = urlList.join(" ");
 
         const result = await axios.post(
@@ -114,7 +114,7 @@ export default function assistantApiCalls() {
       },
     );
   };
-  
+
   const callNewsFramingService = async (text) => {
     return await callAsyncWithNumRetries(
       MAX_NUM_RETRIES,

src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx

@@ -148,6 +148,7 @@ const AssistantNEResult = () => {
                   <Box key={index}>
                     <ListItemButton
                       key={index}
+                      data-testid={value["category"] + "-dropdown"}
                       onClick={() => handleCollapse(index)}
                     >
                       <ListItemText
@@ -176,6 +177,7 @@ const AssistantNEResult = () => {
                                 }
                                 rel="noopener noreferrer"
                                 target={"_blank"}
+                                data-testid={v.value}
                               >
                                 {v.value} &nbsp;
                               </Link>

src/components/NavItems/Assistant/AssistantCheckResults/DbkfMediaResults.jsx

@@ -18,6 +18,9 @@ const DbkfMediaResults = () => {
   const dbkfImageMatch = useSelector((state) => state.assistant.dbkfImageMatch);
   const dbkfVideoMatch = useSelector((state) => state.assistant.dbkfVideoMatch);
 
+  console.log(dbkfImageMatch);
+  console.log(dbkfVideoMatch);
+
   return (
     <List disablePadding={true}>
       {dbkfImageMatch
@@ -39,8 +42,12 @@ const DbkfMediaResults = () => {
                         color={"textPrimary"}
                         component={"div"}
                         align={"left"}
+                        data-testid={
+                          "dbkf_image_warning" + "_" + value.claimUrl
+                        }
                       >
                         {keyword("dbkf_image_warning") +
+                          " " +
                           parseFloat(value.similarity).toFixed(2)}
                       </Typography>
                       <Box mb={0.5} />
@@ -86,6 +93,9 @@ const DbkfMediaResults = () => {
                         color={"textPrimary"}
                         component={"div"}
                         align={"left"}
+                        data-testid={
+                          "dbkf_video_warning" + "_" + value.claimUrl
+                        }
                       >
                         {keyword("dbkf_video_warning") +
                           " " +

src/components/NavItems/Assistant/AssistantCheckResults/SourceCredibilityResult.jsx

@@ -23,10 +23,13 @@ const SourceCredibilityResult = (props) => {
   const sourceType = props.sourceType;
 
   return (
-    <List disablePadding={true}>
+    <List disablePadding={true} data-testid={props["data-testid"]}>
       {sourceCredibilityResults
         ? sourceCredibilityResults.map((value, key) => (
-            <ListItem key={key}>
+            <ListItem
+              key={key}
+              data-testid={"source-" + value.credibilitySource}
+            >
               <ListItemText
                 primary={
                   <div sx={{ ml: 2 }}>

src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCredibilitySignals.jsx

@@ -317,6 +317,7 @@ const AssistantCredSignals = () => {
                   !prevFactChecksResult && (
                     <Typography
                       sx={{ color: "text.secondary", align: "start" }}
+                      data-testid="previousFactChecks-result"
                     >
                       {keyword("reanalyse_url")}
                       {/* should now be obselete as saga is re run */}
@@ -328,7 +329,10 @@ const AssistantCredSignals = () => {
                   </Typography>
                 )}
                 {prevFactChecksDone && prevFactChecksResult.length < 1 && (
-                  <Typography sx={{ color: "text.secondary", align: "start" }}>
+                  <Typography
+                    sx={{ color: "text.secondary", align: "start" }}
+                    data-testid="previousFactChecks-result"
+                  >
                     {keyword("none_detected")}
                   </Typography>
                 )}
@@ -440,6 +444,7 @@ const AssistantCredSignals = () => {
                   machineGeneratedTextResult && (
                     <Typography
                       sx={{ color: "text.secondary", align: "start" }}
+                      data-testid="machineGeneratedText-result"
                     >
                       {keyword(machineGeneratedTextResult.pred)}
                       {/* {round(machineGeneratedTextResult.score, 4)} */}
@@ -452,6 +457,7 @@ const AssistantCredSignals = () => {
                   !machineGeneratedTextResult && (
                     <Typography
                       sx={{ color: "text.secondary", align: "start" }}
+                      data-testid="machineGeneratedText-result"
                     >
                       {keyword("reanalyse_url")}
                       {/* should now be obselete as saga is re run */}

src/components/NavItems/Assistant/AssistantScrapeResults/AssistantLinkResult.jsx

@@ -554,6 +554,8 @@ const AssistantLinkResult = () => {
             columns={columns}
             rowHeight={60}
             disableRowSelectionOnClick
+            disableVirtualization // Otherwise the test script can't see anything
+            data-testid="url-domain-analysis"
             initialState={{
               sorting: {
                 sortModel: [{ field: "status", sort: "desc" }],

src/components/NavItems/Assistant/AssistantScrapeResults/AssistantSCResults.jsx

@@ -75,6 +75,7 @@ const AssistantSCResults = () => {
           {/* expand button */}
           <IconButton
             className={classes.assistantIconRight}
+            data-testid="url-domain-analysis-button"
             onClick={() => dispatch(setAssuranceExpanded(!assuranceExpanded))}
           >
             <ExpandMoreIcon color={"primary"} />
@@ -120,6 +121,7 @@ const AssistantSCResults = () => {
                     icon={CheckCircleOutlineIcon}
                     iconColor={trafficLightColors.positive}
                     sourceType={sourceTypes.positive}
+                    data-testid="sourceCred-factChecker"
                   />
                 </div>
               ) : null}
@@ -135,6 +137,7 @@ const AssistantSCResults = () => {
                     icon={ErrorOutlineOutlinedIcon}
                     iconColor={trafficLightColors.caution}
                     sourceType={sourceTypes.caution}
+                    data-testid="sourceCred-warning"
                   />
                 </div>
               ) : null}
@@ -150,6 +153,7 @@ const AssistantSCResults = () => {
                     icon={SentimentSatisfied}
                     iconColor={trafficLightColors.mixed}
                     sourceType={sourceTypes.mixed}
+                    data-testid="sourceCred-mentions"
                   />
                 </div>
               ) : null}

src/components/NavItems/Assistant/AssistantScrapeResults/AssistantTextClassification.jsx

@@ -168,6 +168,7 @@ export default function AssistantTextClassification({
               rgbHigh={configs.confidenceRgbHigh}
               keyword={keyword}
               subjectvity={subjectivity}
+              titleText={titleText}
             />
             {filteredSentences.length > 0 ? (
               <FormControlLabel
@@ -196,6 +197,7 @@ export function CategoriesList({
   rgbHigh,
   keyword,
   subjectvity,
+  titleText,
 }) {
   if (_.isEmpty(categories)) {
     return (
@@ -236,7 +238,9 @@ export function CategoriesList({
     );
     index++;
   }
-  return <List>{output}</List>;
+  return (
+    <List data-testid={titleText.toLowerCase() + "-result"}>{output}</List>
+  );
 }
 
 /*

src/components/NavItems/Assistant/AssistantScrapeResults/AssistantTextResult.jsx

@@ -222,21 +222,25 @@ const AssistantTextResult = () => {
               label="Topic"
               {...a11yProps(1)}
               disabled={newsFramingFail || newsFramingLoading}
+              data-testid="topic-tab"
             />
             <Tab
               label="Genre"
               {...a11yProps(2)}
               disabled={newsGenreFail || newsGenreLoading}
+              data-testid="genre-tab"
             />
             <Tab
               label="Persuasion Techniques"
               {...a11yProps(3)}
               disabled={persuasionFail || persuasionLoading}
+              data-testid="persuasion-tab"
             />
             <Tab
               label="Subjectivity"
               {...a11yProps(4)}
               disabled={subjectivityFail || subjectivityLoading}
+              data-testid="subjectivity-tab"
             />
           </Tabs>
 

src/components/NavItems/Assistant/AssistantScrapeResults/AssistantTextSpanClassification.jsx

@@ -299,6 +299,7 @@ export default function AssistantTextSpanClassification({
               allCategoriesLabel={allCategoriesLabel}
               onCategoryChange={handleCategorySelect}
               keyword={keyword}
+              titleText={titleText}
             />
           </CardContent>
         </Card>
@@ -317,6 +318,7 @@ export function CategoriesListToggle({
   allCategoriesLabel,
   onCategoryChange = () => {},
   keyword,
+  titleText,
 }) {
   if (categories.length < 1) return <p>{noCategoriesText}</p>;
 
@@ -402,7 +404,7 @@ export function CategoriesListToggle({
   }
 
   return (
-    <List>
+    <List data-testid={titleText.split(" ")[0].toLowerCase() + "-result"}>
       <ListItem>
         <Typography>{keyword("select_persausion_technique")}</Typography>
       </ListItem>