How to Shared Cypress Assets in an Nx Workspace

tldr;

Many times Nx workspaces have multiple applications, and being able to share custom Cypress commands between the end to end test projects. I spent several months manually copying these commands between the different projects, and would inevitably forget to update one when a change was made. Finally I decided to solve the problem and find a way to share the Cypress assets among the projects. This article will cover one way to do this.

To follow along, you'll need an Nx workspace with at least one end to end project.

Create the Shared Assets Library

Let's get started by creating a shared end to end assets library. This will be similar to creating any other library in an Nx workspace. The only potential difference will be the type of library you create. Nx provides a way to create Angular specific libraries, for example. In this case, we don't want to create a framework specific library. That can be accomplished with the following command:

$ nx g @nrwl/workspace:library e2e-assets --directory shared

This command creates a generic Nx workspace library called e2e-assets and puts it in the libs/shared directory. In this library we'll add custom Cypress commands which we can then use in all our end to end projects.

Create Custom Command File

Let's now add a file that contains a custom Cypress command in our new shared library. This custom command will make it easier to select elements by the data-cy HTML attribute. Create a file in the e2e-assets/src/lib folder called data-cy.commands.ts. Here are the contents of that file:

// data-cy.commands.ts

// load the global Cypress types
/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable {
    /**
     * Custom command to get elements by data-cy attribute.
     * @example cy.dataCy('greeting')
     */
    dataCy(selector: string): Chainable<Element>;
  }
}

Cypress.Commands.add('dataCy', (value) => cy.get(`[data-cy=${value}]`));

The first two lines of the file load the types for Cypress and prevent errors from showing in your IDE. The next portion of the file essentially extends the Cypress object for your tests by declaring the new custom command. If you leave this out and try to use the dataCy command you will get an error and the command will not work. The last line of the file is the code to actually add the custom command. The first argument to the Cypress.Commands.add method is the name of the new command, and the second argument is a callback function that provides the functionality for the custom command.

This custom command returns the cy.get method and selects an element by the data-cy HTML attribute. We'll look at how it's used later.

Importing the Custom Command

The next step is to import the new custom command so it can be used in our Cypress tests. The first import belongs in the e2e-assets/src/index.ts file:

// e2e-assets/src/index.ts

import './lib/data-cy.commands';

This makes the new command available when we import this library into our Cypress tests, which we'll do next. The second import belongs in the app-e2e/src/support/index.ts file. By importing the library here, this new command will be available in the app-e2e Cypress tests.

// app-e2e/src/support/index.ts
import '@my-org/shared/e2e-assets';

Now that you have imported your shared e2e assets library, you can use the new command.

Using The New Custom Command

Here's an example of using the new custom command in a Cypress test:

// app-e2e/src/integration/test.ts

it('should show the homepage', () => {
  cy.dataCy('homepage').should('be.visible');
});

If you didn't use this custom command, your test would like this:

// app-e2e/src/integration/test.ts

it('should show the homepage', () => {
  cy.get('[data-cy=homepage]').should('be.visible');
});

There's not a big difference here, but speaking from experience it gets tiresome to repeat the attribute selector each time you need access to an element based on the data-cy attribute. This simple custom command is much easier to use.

Conclusion

One of the biggest benefits of Nx workspaces is the ability to share code between projects. It's natural to share code between Angular or React apps, but the same process can be used to share code for your Cypress end to end tests. It becomes especially useful the more apps you have in your workspace, and for more complicated Cypress commands.

Original article source at: https://www.prestonlamb.com/

#cypress #nx #workspace 

What is GEEK

Buddha Community

How to Shared Cypress Assets in an Nx Workspace

tldr;

Many times Nx workspaces have multiple applications, and being able to share custom Cypress commands between the end to end test projects. I spent several months manually copying these commands between the different projects, and would inevitably forget to update one when a change was made. Finally I decided to solve the problem and find a way to share the Cypress assets among the projects. This article will cover one way to do this.

To follow along, you'll need an Nx workspace with at least one end to end project.

Create the Shared Assets Library

Let's get started by creating a shared end to end assets library. This will be similar to creating any other library in an Nx workspace. The only potential difference will be the type of library you create. Nx provides a way to create Angular specific libraries, for example. In this case, we don't want to create a framework specific library. That can be accomplished with the following command:

$ nx g @nrwl/workspace:library e2e-assets --directory shared

This command creates a generic Nx workspace library called e2e-assets and puts it in the libs/shared directory. In this library we'll add custom Cypress commands which we can then use in all our end to end projects.

Create Custom Command File

Let's now add a file that contains a custom Cypress command in our new shared library. This custom command will make it easier to select elements by the data-cy HTML attribute. Create a file in the e2e-assets/src/lib folder called data-cy.commands.ts. Here are the contents of that file:

// data-cy.commands.ts

// load the global Cypress types
/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable {
    /**
     * Custom command to get elements by data-cy attribute.
     * @example cy.dataCy('greeting')
     */
    dataCy(selector: string): Chainable<Element>;
  }
}

Cypress.Commands.add('dataCy', (value) => cy.get(`[data-cy=${value}]`));

The first two lines of the file load the types for Cypress and prevent errors from showing in your IDE. The next portion of the file essentially extends the Cypress object for your tests by declaring the new custom command. If you leave this out and try to use the dataCy command you will get an error and the command will not work. The last line of the file is the code to actually add the custom command. The first argument to the Cypress.Commands.add method is the name of the new command, and the second argument is a callback function that provides the functionality for the custom command.

This custom command returns the cy.get method and selects an element by the data-cy HTML attribute. We'll look at how it's used later.

Importing the Custom Command

The next step is to import the new custom command so it can be used in our Cypress tests. The first import belongs in the e2e-assets/src/index.ts file:

// e2e-assets/src/index.ts

import './lib/data-cy.commands';

This makes the new command available when we import this library into our Cypress tests, which we'll do next. The second import belongs in the app-e2e/src/support/index.ts file. By importing the library here, this new command will be available in the app-e2e Cypress tests.

// app-e2e/src/support/index.ts
import '@my-org/shared/e2e-assets';

Now that you have imported your shared e2e assets library, you can use the new command.

Using The New Custom Command

Here's an example of using the new custom command in a Cypress test:

// app-e2e/src/integration/test.ts

it('should show the homepage', () => {
  cy.dataCy('homepage').should('be.visible');
});

If you didn't use this custom command, your test would like this:

// app-e2e/src/integration/test.ts

it('should show the homepage', () => {
  cy.get('[data-cy=homepage]').should('be.visible');
});

There's not a big difference here, but speaking from experience it gets tiresome to repeat the attribute selector each time you need access to an element based on the data-cy attribute. This simple custom command is much easier to use.

Conclusion

One of the biggest benefits of Nx workspaces is the ability to share code between projects. It's natural to share code between Angular or React apps, but the same process can be used to share code for your Cypress end to end tests. It becomes especially useful the more apps you have in your workspace, and for more complicated Cypress commands.

Original article source at: https://www.prestonlamb.com/

#cypress #nx #workspace 

RFID Asset Management System - TechnoSource Australia

WASP AssetCloud is a RFID asset management system which can be accessed and used from anywhere in the world in order to effectively manage your assets. user no longer need to rely on traditional spreadsheets or any other form of manual process for asset management which can be both time-consuming as well as ineffective.

Users will have instant access to all of their asset information on their PC or even on their Android/IOS mobile device through the WASP AssetCloud app.

From tracking the location of fixed assets, to knowing which assets are due to be returned. From tracking asset related maintenance to efficiently checking out or checking in Assets. WASP AssetCloud will make Asset Management a breeze.

TechnoSource Australia is the authorised business partner and Asia-Pacific distributor for WASP Barcode Technologies USA.We provide software solutions like POS system, asset labels, barcode asset tracking system, barcode system, warehouse stock control system, portable data terminals, time and attendance system and many other essentials needed to run your business successfully.

#asset labels #asset tags #rfid asset management system #rfid asset tracking #cloud asset inventory #cloud inventory

How much does it cost to build a video sharing app?

There are so many things you can do with your mobile phone, regardless of which operating system you use. Your smartphone is a miniature computer, which means you can use it to browse the web, stream music and download apps galore. You can also share videos with certain apps. There is no doubt that video, editing, recording, and sharing application development will give a wholesome solution to your app users and will help you make your application stand out from the competitors.

Are you searching for the app development company who build video sharing app? If yes then AppClues Infotech is the best mobile app development company offer world-class mobile app development services at competitive prices across all major mobile platforms for start-ups as well as enterprises. Our team of professional designers and developers can proficiently develop a video sharing mobile app tailored to your needs, to help you achieve the end result of your business gaining more market autonomy.

Our Expertise in Mobile App Development:

• iPhone App Development
• iPad App Development
• Apple Watch App Development
• Flutter App Development
• Android App Development
• Ionic App Development
• React Native App Development
• Windows App Development
• Cross-Platform App Development

We offer custom social networking app development solutions which are designed to not just make your brand a household name but also to keep your brand above the ever-growing crowd of entertainment mobile apps. We build mobile apps across various industry verticals including travel, social networking, restaurant, real estate, health care, news, etc.

The expense of video sharing app development depends on app size, app platform, app functionality, what features you require, the team of app developers, etc. So generally cost is in between $2,000 - 15,000. It can vary from app to app because every app has different requirements.

#video sharing app development #best video sharing app development company #top video sharing app development company #make a video sharing mobile app #cost to create a video sharing app

How to Use Shared Preferences to Stored Data in Flutter | Shared preferences Flutter

Shared preferences flutter is for Storing simple data on Device for Reading & writing Simple Key-value pairs in iOS & Android.

In Simple Example, Let Just Say You Just Want to Stored Simple Data on Phone And Later You can refer that Data whenever You Launch that App then Shared preferences will help you to Stored data on the Phone.

Shared preferences in flutter NSUserDefaults on iOS & macOS, and SharedPreferences on Android.

💻Shared Preferences:- https://alltechsavvy.com/shared-preferences-flutter/

👩‍💻Github Code: https://github.com/sagarshende23/shared_preference_flutter

#shared #flutter #shared preferences flutter #shared preferences

Popup Share Modal UI Design using HTML CSS & JavaScript

#css share modal #modal dialog box #popup share modal #share modal #share modal in javascript