Comments (7)
I love the new version. That's even better!
from cypress-codegen.
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.
@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.
@emahuni Check out version 2.0.0, which contains substantial improvements!
from cypress-codegen.
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.
I didn't see any scooped examples, are they still supported?
from cypress-codegen.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cypress-codegen.