feat(wizard/docker): dataCy and names attributes to fields/buttons

app/react/components/form-components/SwitchField/Switch.tsx

@@ -48,8 +48,9 @@ export function Switch({
           checked={checked}
           disabled={disabled || limitedToBE}
           onChange={({ target: { checked } }) => onChange(checked)}
+          data-cy={dataCy}
         />
-        <span className="slider round" data-cy={dataCy} />
+        <span className="slider round" />
       </label>
       {limitedToBE && <BEFeatureIndicator featureId={featureId} />}
     </>

app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EndpointTypeView.tsx

@@ -43,6 +43,7 @@ export function EnvironmentTypeSelectView() {
               <Button
                 disabled={types.length === 0}
                 onClick={() => startWizard()}
+                data-cy="wizard_button-start-wizard"
               >
                 Start Wizard
               </Button>

app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EnvironmentSelector.tsx

@@ -32,6 +32,7 @@ export function EnvironmentSelector({
               <Option
                 key={eType.id}
                 featureId={eType.featureId}
+                id={eType.id}
                 title={eType.title}
                 description={eType.description}
                 icon={eType.icon}

app/react/portainer/environments/wizard/EnvironmentsCreationView/EnvironmentsCreationView.tsx

@@ -82,10 +82,14 @@ export function EnvironmentCreationView() {
                     'flex justify-between'
                   )}
                 >
-                  <Button disabled={isFirstStep} onClick={onPreviousClick}>
+                  <Button
+                    disabled={isFirstStep}
+                    onClick={onPreviousClick}
+                    data-cy="wizard_button-previous"
+                  >
                     <i className="fas fa-arrow-left space-right" /> Previous
                   </Button>
-                  <Button onClick={onNextClick}>
+                  <Button onClick={onNextClick} data-cy="wizard_button-next">
                     {isLastStep ? 'Finish' : 'Next'}
                     <i className="fas fa-arrow-right space-left" />
                   </Button>

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/APIForm.tsx

@@ -80,6 +80,7 @@ export function APIForm({ onCreate }: Props) {
                 loadingText="Connecting environment..."
                 isLoading={mutation.isLoading}
                 disabled={!dirty || !isValid}
+                data-cy="wizard_button-connect"
               >
                 <i className="fa fa-plug" aria-hidden="true" /> Connect
               </LoadingButton>

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/TLSFieldset.tsx

@@ -16,6 +16,8 @@ export function TLSFieldset() {
       <div className="form-group">
         <div className="col-sm-12">
           <SwitchField
+            dataCy="switch-enable-tls"
+            name="switch-enable-tls"
             label="TLS"
             checked={values.tls}
             onChange={(checked) => setFieldValue('tls', checked)}
@@ -28,6 +30,8 @@ export function TLSFieldset() {
           <div className="form-group">
             <div className="col-sm-12">
               <SwitchField
+                dataCy="switch-skip-cert-verification"
+                name="switch-skip-cert-verification"
                 label="Skip Certification Verification"
                 checked={!!values.skipVerify}
                 onChange={(checked) => setFieldValue('skipVerify', checked)}

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/SocketTab/SocketForm.tsx

@@ -58,6 +58,7 @@ export function SocketForm({ onCreate }: Props) {
                 loadingText="Connecting environment..."
                 isLoading={mutation.isLoading}
                 disabled={!dirty || !isValid}
+                data-cy="wizard_button-connect"
               >
                 <i className="fa fa-plug" aria-hidden="true" /> Connect
               </LoadingButton>
@@ -94,6 +95,8 @@ function OverrideSocketFieldset() {
       <div className="form-group">
         <div className="col-sm-12">
           <SwitchField
+            dataCy="switch-override-socket-path"
+            name="switch-override-socket-path"
             checked={values.overridePath}
             onChange={(checked) => setFieldValue('overridePath', checked)}
             label="Override default socket path"

app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/AgentForm.tsx

@@ -57,6 +57,7 @@ export function AgentForm({ onCreate, showGpus = false }: Props) {
                 loadingText="Connecting environment..."
                 isLoading={mutation.isLoading}
                 disabled={!dirty || !isValid}
+                data-cy="wizard_button-connect"
               >
                 <i className="fa fa-plug" aria-hidden="true" /> Connect
               </LoadingButton>

app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentForm/EdgeAgentForm.tsx

@@ -55,6 +55,7 @@ export function EdgeAgentForm({ onCreate, readonly, showGpus = false }: Props) {
                   isLoading={createMutation.isLoading}
                   loadingText="Creating environment..."
                   disabled={!isValid}
+                  data-cy="wizard_button-create"
                 >
                   <i className="fa fa-plug space-right" />
                   Create

app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentTab.tsx

@@ -48,7 +48,12 @@ export function EdgeAgentTab({
 
           <div className="row">
             <div className="flex justify-end">
-              <Button color="primary" type="reset" onClick={handleReset}>
+              <Button
+                color="primary"
+                type="reset"
+                onClick={handleReset}
+                data-cy="wizard_button-add-another-environment"
+              >
                 Add another environment
               </Button>
             </div>

app/react/portainer/environments/wizard/HomeView/HomeView.tsx

@@ -59,6 +59,7 @@ export function HomeView() {
                   {localEnvironmentAdded.status === 'success' && (
                     <Link to="portainer.home" className={styles.link}>
                       <Option
+                        id="get-started"
                         icon={
                           localEnvironmentAdded.type === EnvironmentType.Docker
                             ? 'fab fa-docker'
@@ -72,6 +73,7 @@ export function HomeView() {
                   )}
                   <Link to="portainer.wizard.endpoints" className={styles.link}>
                     <Option
+                      id="add-environment"
                       title="Add Environments"
                       icon="fa fa-plug"
                       description="Connect to other environments"

app/react/portainer/environments/wizard/components/Option/Option.tsx

@@ -10,6 +10,7 @@ import styles from './Option.module.css';
 
 export interface SelectorItemType {
   icon: string | ComponentType<{ selected?: boolean; className?: string }>;
+  id: string;
   title: string;
   description: string;
 }
@@ -21,6 +22,7 @@ interface Props extends SelectorItemType {
 }
 
 export function Option({
+  id,
   icon,
   active,
   description,
@@ -32,6 +34,7 @@ export function Option({
   const isLimited = isLimitedToBE(featureId);
   return (
     <button
+      data-cy={`wizard_option-${id}`}
       className={clsx(
         styles.optionTile,
         isLimited ? styles.teaser : styles.feature,