DEV Community

Manpreet Bhikhe
Manpreet Bhikhe

Posted on

4 1

Path aliases in Cypress

I came across Path Aliases some time ago. Articles mentioning how developers made imports in their React and node projects look nice. I wondered if I could use this feature in my Cypress automation.

Let me give you some context. So typically imports in my project look like this:

import ProductsPage from '../../pages/ProductsPage';
import Navigation from '../../pages/Navigation';
import testData from '../../../../fixtures/product-listing.json'
Enter fullscreen mode Exit fullscreen mode

But with path aliases, the imports look like:

import ProductsPage from '@pages/ProductsPage';
import Navigation from '@pages/Navigation';
import testData from '@fixtures/product-listing.json'
Enter fullscreen mode Exit fullscreen mode

Cleaner, right ?
Follow along to setup path aliases in your cypress project.

Step 1: Webpack preprocessor

Install webpack preprocessor plugin in your project. This will ultimately help to resolve path aliases.

npm install --save-dev @cypress/webpack-preprocessor
Enter fullscreen mode Exit fullscreen mode

Step 2: Webpack Options

Create webpack options which will contain reference of paths to the aliases. You can keep this object in cypress.config.js or separate file as per your preference.

const wpOptions = {
  webpackOptions: {
    resolve: {
      alias: {
        '@pages': path.resolve(__dirname, './cypress/e2e/pages'),
        '@fixtures': path.resolve(__dirname, './cypress/fixtures'),
        '@': __dirname,
      },
    },
  },
  watchOptions: {},
};
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure preprocessor plugin

Next, configure cypress to use webpack preprocessor on every file with options specified in previous step

setupNodeEvents(on, config) {
  on('file:preprocessor', webpackPreprocessor(wpOptions));
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Add paths to jsconfig

This step will enable intellisense for IDE of your choice. Add following settings to jsconfig.json file in project root.

{
  "compilerOptions": {
    "paths": {
      "@pages/*": [
        "./cypress/e2e/pages/*"
      ],
      "@fixtures/*": [
        "./cypress/fixtures/*"
      ],
      "@/*": [
        "./*"
      ]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

That's all !

Now you can create imports like this

import ProductsPage from '@pages/ProductsPage';
import Navigation from '@pages/Navigation';
import testData from '@fixtures/product-listing.json'
Enter fullscreen mode Exit fullscreen mode

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more