Remove html attribute in production build

babel remove attributes
data-test attribute
data-testid on component
babel-plugin-remove-object-properties
data-qa attribute
material-ui data-testid
babel-plugin-transform-react-remove-prop-types
react boolean attributes

In order to be able to write Selenium test cases for our Webpack built React app we've added data-* attributes to certain parts of the HTML elements, example:

<div class="Component__item___2jdnc" data-app-feature="example-id"></div>

We can use these to locate elements to interact with and assert on. But, in production environment I would like to have them removed. How could that be achieved?

Remove html attribute in production build - reactjs, In order to be able to write Selenium test cases for our Webpack built React app we've added data-* attributes to certain parts of the HTML elements, example:  The Element method removeAttribute() removes the attribute with the specified name from the element.

Babel plugin to remove `data-testid` · Issue #479 · testing-library , This babel plugin will remove data-testid from the rendered HTML. be nice to have a babel plugin that people can use when building production. that I think it's unnecessary to remove data-testid attributes for two reasons:. The hidden attribute can also be used to keep a user from seeing an element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the hidden attribute, and make the element visible. The hidden attribute is part of the Global Attributes, and can be used on any HTML element. All HTML elements.

I ran into the same issue while using styled-components. This is the solution I found to be most straight forward to me without using a HOC or Babel plugins.

I created a function which checks for a specific environment and then returns the value you pass to it, or undefined. If the attribute value is undefined the attribute wont be included.

export const ifDev = val => (process.env.NODE_ENV === "development" ? val : undefined);

Then in your components:

import { ifDev } from './dev';

<div className="sc-fMiknA" data-app-feature={ifDev("element-id")}></div>

Now I can find elements in browser tests while using generated class names and the attributes won't be included in production builds.

Angular and Cypress: data-cy attributes - Agilix, You might have used the data-cy HTML 5 attributes in your templates, if not, If the actor is more hostile, he/she could reverse engineer your app and create a on removing these attributes from your application in production  I'm providing the client-side (browser) version as this answer came up when I googled remove HTML attributes: // grab the element you want to modify var el = document.querySelector('p'); // get its attributes and cast to array, then loop through Array.prototype.slice.call(el.attributes).forEach(function(attr) { // remove each attribute el.removeAttribute(attr.name); });

you can use selenium to do so:

WebElement yourElement = driver.findElement(By.xpath("xpath to element"));

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].removeAttribute('data-app-feature','example-id')",yourElement);

babel-plugin-jsx-remove-data-test-id, I want to use data-test attributes (as suggested here), so when running tests I can reference tags using these But I don't want these data-test attributes to get to production, I need to remove them. You could make a custom directive: https​://vue-loader.vuejs.org/en/options.html#compilermodules. Some of the most common HTML attributes are the src attribute of an img tag, the href of an a tag, class, id, and style. For a full list of HTML attributes, view the attribute list on the Mozilla Developer Network. Custom elements that are not part of the HTML standard will be prepended with data-.

Create a tool that removes the attributes (a few lines of code) and tun that tool in the post build action.

How to remove attributes from tags inside Vue components?, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, Remove the class attribute from an <h1> element:. Comment out the [HtmlTargetElement] attribute line and it will default to targeting <bold> tags, that is, HTML markup of the form <bold>. Remember, the default naming convention will match the class name BoldTagHelper to <bold> tags. Run the app and verify that the <bold> tag is processed by the tag helper.

HTML DOM removeAttribute() Method, But in order to use React in production, you need NPM and Node.js installed. The quickest way start learning React is to write React directly in your HTML files. If you've already created the create-react-app you can skip this section. you might find the index.html in the public folder instead, you should also remove any​  Status Attributes and Item Status Control Status attributes enable and disable the functionality of an item over time. Each status attribute allows you to enable the item for a particular use. For example, if you set the status attribute Purchasable to Yes, you can put the item on a purchase order.

React Getting Started, Removing most of the whitelist helped us reduce the bundle size a little bit. With React 16, you can now pass custom attributes to all HTML and SVG doesn't have to include the whole attribute whitelist in the production version. React v16.13.0 · Building Great User Experiences with Concurrent Mode  The action attribute specifies where to send the form-data when a form is submitted. Browser Support. Differences Between HTML 4.01 and HTML5. In HTML5, the action attribute is no longer required. <form action=" URL "> Attribute Values. Where to send the form-data when the form is submitted. Possible values: An absolute URL - points to another

DOM Attributes in React 16 – React Blog, Let's create a new HTML file with an img tag with one attribute. modify, and remove attributes on an HTML element in the DOM using plain  Creating an Image HTML Helper. When you create an instance of the TagBuilder class, you pass the name of the tag that you want to build to the TagBuilder constructor. Next, you can call methods like the AddCssClass and MergeAttribute() methods to modify the attributes of the tag. Finally, you call the ToString() method to render the tag.

Comments
  • It was my first though, there must be build plugins for this. But I am starting to realize that I must do this at build time and therefor have different builds for different environments and I prefer to have one same build which can move from test to preprod and finally into prod.
  • Just to clarify, you don't want the build artifacts to change, just the elements in the users browser? Are you using client or server side rendering?
  • Client rendering, so I think your HOC suggestion is the way forward.
  • Can you please tell me how to achieve this using webpack?
  • Note: The attributes won't appear in the DOM, but they're still present in the JS source files that produce the DOM. (the question is vague regarding this matter, so your answer is still great! I'm mentioning it just in case someone reads that and actually wants to reduce their bundle size).