fix(testing): improve error message for ct generators

packages/cypress/src/utils/find-target-options.ts

@@ -60,7 +60,11 @@ export async function findBuildConfig(
     return await findInGraph(tree, graph, options);
   } catch (e) {
     logger.error(e);
-    throw new Error(stripIndents`Error trying to find build configuration. Try manually specifying the build target with the --build-target flag.
+    throw new Error(stripIndents`Error trying to find build configuration. ${
+      options.buildTarget
+        ? 'Try using an app of the same framework for the --build-target.'
+        : 'Try manually specifying the build target with the --build-target flag.'
+    }
     Provided project? ${options.project}
     Provided build target? ${options.buildTarget}
     Provided Executors? ${[...options.validExecutorNames].join(', ')}`);
@@ -86,13 +90,15 @@ ${Array.from(options.validExecutorNames)
   .map((ve) => ` - ${ve}`)
   .join('\n')}
 
-This is most likely because the provided --build-target is not a build target for an application.
+${frameworkHelperMessage(Array.from(options.buildTarget), executorName)}
+This is most likely because the provided --build-target is not a build target for an application or framework.
 For example, the provide build target, '${options.buildTarget}' is:
  - the build target for a buildable/publishable library instead of an app.
- - using a different framework than expected like react library using an angular app build target.
+ - using a different framework than expected like react library using an angular or next app build target.
 
 If you do not have an app in the workspace to you can make a new app with 'nx g app' and use it just for component testing
 `);
+
     throw new Error(
       'The provided --build-target does not use an executor in the allow list of executors defined.'
     );
@@ -112,6 +118,39 @@ If you do not have an app in the workspace to you can make a new app with 'nx g
   );
 }
 
+function frameworkHelperMessage(
+  validExecutorNames: string[],
+  executorName: string
+): string {
+  const executorsToFramework = {
+    '@nx/webpack:webpack': 'react',
+    '@nx/vite:build': 'react',
+    '@nrwl/webpack:webpack': 'react',
+    '@nrwl/vite:build': 'react',
+    '@nx/angular:webpack-browser': 'angular',
+    '@nrwl/angular:webpack-browser': 'angular',
+    '@angular-devkit/build-angular:browser': 'angular',
+    '@nx/next:build': 'next',
+    '@nrwl/next:build': 'next',
+  };
+  const buildTargetFramework = executorsToFramework[executorName];
+  const invokedGeneratorFramework = validExecutorNames.find(
+    (e) => !!executorsToFramework[e]
+  );
+
+  if (
+    buildTargetFramework &&
+    invokedGeneratorFramework &&
+    buildTargetFramework !== invokedGeneratorFramework
+  ) {
+    return `It looks like you're using a different plugin generator than the --build-target framework is set up for.
+The provided build target is configured for ${buildTargetFramework} instead of ${invokedGeneratorFramework}.
+Try using @nx/${buildTargetFramework} instead.`;
+  }
+
+  return '';
+}
+
 async function findInGraph(
   tree: Tree,
   graph: ProjectGraph,