feat: introduce playwright (#1194)

* feat: introduce playwright

* test: migrate apps folder to playwright (#1201)

* test: rewrite connections tests with playwright (#1203)

* test: rewrite executions tests with playwright (#1207)

* test: rewrite flow editor tests with playwright (#1212)

* test(flow-editor): rewrite tests using serial mode (#1218)

* test: update custom connection creation paths

* test: move login logic to page fixture

* test: remove cypress tests and deps

---------

Co-authored-by: Ali BARIN <ali.barin53@gmail.com>

packages/web/src/components/AddNewAppConnection/index.tsx

@@ -101,7 +101,9 @@ export default function AddNewAppConnection(
               </InputAdornment>
             }
             label={formatMessage('apps.searchApp')}
-            data-test="search-for-app-text-field"
+            inputProps={{
+              'data-test': 'search-for-app-text-field',
+            }}
           />
         </FormControl>
       </Box>
@@ -109,7 +111,10 @@ export default function AddNewAppConnection(
       <DialogContent>
         <List sx={{ pt: 2, width: '100%' }}>
           {loading && (
-            <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />
+            <CircularProgress
+              data-test="search-for-app-loader"
+              sx={{ display: 'block', margin: '20px auto' }}
+            />
           )}
 
           {!loading &&

packages/web/src/components/ExecutionStep/index.tsx

@@ -37,10 +37,12 @@ function ExecutionStepDate(props: Pick<IExecutionStep, 'createdAt'>) {
   const relativeCreatedAt = createdAt.toRelative();
 
   return (
-    <Tooltip title={createdAt.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}>
+    <Tooltip
+      title={createdAt.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}
+    >
       <Typography variant="caption" gutterBottom>
         {formatMessage('executionStep.executedAt', {
-          datetime: relativeCreatedAt
+          datetime: relativeCreatedAt,
         })}
       </Typography>
     </Tooltip>
@@ -117,7 +119,7 @@ export default function ExecutionStep(
           <SearchableJSONViewer data={executionStep.dataIn} />
         </TabPanel>
 
-        <TabPanel value={activeTabIndex} index={1}>
+        <TabPanel value={activeTabIndex} index={1} data-test="data-out-panel">
           <SearchableJSONViewer data={executionStep.dataOut} />
         </TabPanel>
 

packages/web/src/components/PowerInput/index.tsx

@@ -60,11 +60,13 @@ const PowerInput = (props: PowerInputProps) => {
   const [showVariableSuggestions, setShowVariableSuggestions] =
     React.useState(false);
 
-  const disappearSuggestionsOnShift = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  const disappearSuggestionsOnShift = (
+    event: React.KeyboardEvent<HTMLInputElement>
+  ) => {
     if (event.code === 'Tab') {
       setShowVariableSuggestions(false);
     }
-  }
+  };
 
   const stepsWithVariables = React.useMemo(() => {
     return processStepWithExecutions(priorStepsWithExecutions);
@@ -112,7 +114,10 @@ const PowerInput = (props: PowerInputProps) => {
             }}
           >
             {/* ref-able single child for ClickAwayListener */}
-            <ChildrenWrapper style={{ width: '100%' }} data-test="power-input">
+            <ChildrenWrapper
+              style={{ width: '100%' }}
+              data-test={`${name}-power-input`}
+            >
               <FakeInput disabled={disabled}>
                 <InputLabelWrapper>
                   <InputLabel
@@ -140,7 +145,10 @@ const PowerInput = (props: PowerInputProps) => {
                 />
               </FakeInput>
               {/* ghost placer for the variables popover */}
-              <div ref={editorRef} style={{ position: 'absolute', right: 16, left: 16 }} />
+              <div
+                ref={editorRef}
+                style={{ position: 'absolute', right: 16, left: 16 }}
+              />
 
               <Popper
                 open={showVariableSuggestions}

packages/web/src/components/TextField/index.tsx

@@ -14,6 +14,7 @@ type TextFieldProps = {
   name: string;
   clickToCopy?: boolean;
   readOnly?: boolean;
+  'data-test'?: string;
 } & MuiTextFieldProps;
 
 const createCopyAdornment = (
@@ -44,6 +45,7 @@ export default function TextField(props: TextFieldProps): React.ReactElement {
     disabled = false,
     onBlur,
     onChange,
+    'data-test': dataTest,
     ...textFieldProps
   } = props;
 
@@ -82,6 +84,9 @@ export default function TextField(props: TextFieldProps): React.ReactElement {
             readOnly,
             endAdornment: clickToCopy ? createCopyAdornment(inputRef) : null,
           }}
+          inputProps={{
+            'data-test': dataTest,
+          }}
         />
       )}
     />