0

In many frontend frameworks (like Angular, Vue) I used to use approach of adding "data-cy" attribute for end-to-end testing purposes and removing it during production build (so that they don't pollute the application).

What approach should I use in Razor to achieve the same result?

When I run .NET MVC project locally, I'd like to write:

cshtml: @Html.LabelFor(model => model.Password, data_cy = "here-is-my-label")

html: <input class="form-control" data-cy="here-is-my-label">

When I deploy to production I'd like to have it to work like that:

cshtml: @Html.LabelFor(model => model.Password, data_cy = "here-is-my-label")

html: <input class="form-control" >

I know I can probably write some wrapper or I can overwrite the LabelFor method but I'm looking for a global and clean code solution that would be following good practices.

I'd appreciate especially help of ones who use Razor and Cypress together.

I tried to look at Stack Overflow for some threads about using Razor and Cypress and for general information about having attributes to be environment dependent in Razor but didn't find anything.

I don't want if-else solution like described here: Preprocessor directives in Razor

Krystian
  • 122
  • 1
  • 10
  • How do you remove the attributes for Angular and Vue - is it a post-build step? – Mads Brugger Jan 24 '23 at 20:43
  • Like described here: https://stackoverflow.com/questions/67922415/removing-all-data-test-attributes-from-vue-templates-during-production-build-in Webpack node transforms – Krystian Jan 24 '23 at 20:53
  • Also, please note, I might want to write in cshtml `
    ` and I'd like to have it removed too.
     – Krystian Jan 24 '23 at 20:56

0 Answers0