Giter Site home page Giter Site logo

Comments (7)

emahuni avatar emahuni commented on June 16, 2024 1

I love the new version. That's even better!

from cypress-codegen.

emahuni avatar emahuni commented on June 16, 2024

I think I have a solution to the actual problem, there are several reasons why we are importing using that weird require syntax. The import is happening from the plugin's directory node_modules/cypress-codegen/dist/, so, that is backing out into the main dir. ../../../. Then I don't see why we are replacing the filePath in the first place; a simpler:

const customCommandObject = require(`../../../${projectName}${filePath}`);

would do since the file path is from the main dir into the commands dir.

I have noticed that my setup will not work with this plugin, at least as it is, since the project is a pnpm workspaces package. So that path is now so lost that reconciling it has been a headache. It comes out as a ../../../../../../packages/project/cypress/commands as it has to backoff three more symlink levels to the root workspace dir, then figure out the project... Webpack was simply not happy with anything I tried.

What I ended up doing was taking the bit of code that adds the commands to cy and do that from the e2e script instead. I removed all the plugin configs and inits.

I wish this plugin could just have such an export so as to allow manual imports and addition of commands if the auto commands addition doesn't work, such as in my case.

function isScopedMethod (methodName?: string) {
    return !!methodName && methodName.endsWith('Scoped');
}

export function addModuleCommands (module) {
    const methodNames = Object.keys(module);
    methodNames.forEach((commandName: string) => {
        const method = module[commandName];
        if (isScopedMethod(commandName)) {
            // @ts-ignore
            Cypress.Commands.add(commandName, { prevSubject: 'element' }, method);
        } else {
            // @ts-ignore
            Cypress.Commands.add(commandName, method);
        }
    });
}

then I used in a cypress/commands/index.ts file:

import { addModuleCommands } from "cypress-codegen";

// then manually import the command files
import * as authCommands from "./auth.coms"; 
import * as cyGetter from './cy-getter.coms';
import * as delaysTimeouts from './delays-timeouts.coms';

/** add commands to cypress */
addModuleCommands(authCommands);
addModuleCommands(cyGetter);
addModuleCommands(delaysTimeouts);

Which is then imported by e2e.ts as import '../commands'.

I don't mind doing this, it's fine and much better than doing the original Cypress recipe of adding functions.

How to solve the auto import?
The issue is with webpack. What I noticed I could do was import the commands' modules fromsrc/plugin/index.ts file then send them over to the src/index.ts file as already imported modules. This means totally removing the 2 params sent to the beforeAll function. But doing this needs the modules to be serialized then deserialized on the other end for addition to cy. I didn't have time to write that out, but I think that's the overall solution that can make this easier to maintain without the weird opinionated require path resolution hack. It shows it's hacky when the maintainers clearly state they don't know why they have to do it that way.

 // This relative file path is extremely particular and for some unknown reason must be exactly this.
      const customCommandObject = require(`../../../${projectName}cypress/commands/${filePath.replace(
        commandsDirectory,
        ''
      )}`);

Well I have stated the reason, but solving this to work seamlessly in other environments requires a huge change from the way this is being done.

from cypress-codegen.

danadajian avatar danadajian commented on June 16, 2024

@emahuni Thanks for pointing this out! I do realize this plugin does not currently work with pnpm because of the require() statement, and also doesn't work with esbuild. I would like to refactor this to add support for both of these, since webpack is basically obsolete these days. However, I could see we would still get some value from simply importing a function that just calls Cypress.Commands.add() on everything in a module.

We can release a v2.0.0 that implements your addModuleCommands() idea. If you would like to contribute this I would encourage you to do so!

from cypress-codegen.

danadajian avatar danadajian commented on June 16, 2024

@emahuni Check out version 2.0.0, which contains substantial improvements!

from cypress-codegen.

emahuni avatar emahuni commented on June 16, 2024

New version 🎉

Sorry I spent time doing something and completely forgot to get back to this, by the time you asked me that question I had already changed a lot of things I intended to contribute back to this repo and left this unread, guess got too busy. I'll check out the new release, I hope you used the proposal it was okay to use the ideas. I'll share what I did in a new issue so we can improve on it. It even simplifies commands that expect a subject to not require a scope name.

from cypress-codegen.

emahuni avatar emahuni commented on June 16, 2024

I didn't see any scooped examples, are they still supported?

from cypress-codegen.

danadajian avatar danadajian commented on June 16, 2024

I didn't see any scooped examples, are they still supported?

We can maybe add support later, but for now I'd recommend adding those commands separately with the desired prevSubject option. It would be difficult to support all use cases since there are many options Cypress offers for adding custom commands.

from cypress-codegen.

Related Issues (7)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.