Develop Reference

Which has more specificity between hidden attribute in HTML or display property in CSS? And how?

Also what is the best way to hide the elements from the DOM so that the attacker won't be able to change the css property or html attribute in order to access the element. I know we can use React or Angular to develop website and it is easier to hide or display elements. But I want to know in pure HTML & JS what is the best way?

Anyone can just use the browser console and find all elements with for example:
document.querySelectorAll('*');
It does not matter if elements are hidden with CSS.
Even if you encrypt your HTML you will have to decrypt it to show it to the browser. Then the above code still finds all the elements.
Any code you have can be deactivated by setting a breakpoint and rewriting it in-browser using the developer tools.
Even if you replace document.querySelectorAll and all like them with an empty function, developers can still just add jQuery or any DOM querying engine and find your elements that way.
Any code you can use to hide or show elements can just be executed using the browser console if someone spends the time understanding your code.
How else would you debug or test it?
Angular, Vue etc. does remove elements from the DOM but you should never expect this to be a security feature! A hacker can easily set a breakpoint anywhere in your code, inspect API results from the Network panel, go into the components' code to find out what HTML they would be rendering and much more I haven't started to mention.
To implement security you want to only have in the browser what the user needs to see.
There is no way around it.
DOM, stylings, scripts, assets, etc. can always be accessed using developer tools.
As for the question in your question title:
style attribute styles have a higher specificity than CSS from file (or style tags)
CSS from file (or style tags) with !important has higher specificity than styles from the style attribute
style attribute styles with !important have the highest specificty
So !important just overrides specificity if you want to look at it that way. Other than that you should read about CSS Specificity.

Both are same. If you store your value from html hidden or css hide. Anyone can find out them.
So if you are using html , js & css and want to pass value as hidden than disable developer tool and shortkey to open it by this way you can protect your data or else use any encryption method for that.

Build xpath with iFrame from jqueryui.com

I am on the https://jqueryui.com/selectmenu/ website where I am trying to build xpath for the first selector Select a speed. I build the xpath to iframe but how to reach the first selector Select a speed?
//body/div[#id='container']/div[#id='content-wrapper']/div[1]/div[1]/iframe[1]

Since your elements are inside the iframe in order to access these elements you should first switch to the iframe as described here
Also, to locate the iframe you can simply use one of the following xpaths//iframe or //iframe[#class='demo-frame'] or select by class demo-frame etc.
After switching into the ifame the xpath to select a speed is //span[#id='speed-button']

How to hover over using TestCafe?

As a part of Automation testing, I want to hover over this node. which has a complex source code. You can find the code here
. Can someone please say the code which can hover using the syntax .hover(Selector(?)) using TestCafe.
Thanks in advance!

For now, you can select nodes in svg only if it's inserted into the HTML document via the <svg> tag. TestCafe does not support selecting elements in an svg that is imported from a separate document via the <object> tag.
There are multiple ways to select an element in TestCafe using Selector. To do that, you need to identify the element's distinguishing features. These might include the element's id, class, attributes, position in the DOM tree or relation to other elements. Then you need to create a Selector based on one of these features.
For more information on TestCafe selectors see our documentation.

Assigning ID to all elements of a page in angular automatically

We are working on an enterprise web application, at the moment we hired an e2e test engineer to perform automation tests.
He asked us to assign IDs to every single element in pages.
Is there a tool or something to perform this action automatically and adds some random IDs to all elements in HTML files ?
we already have a bunch of files and it would take much time to add them manually.
According to the following question, A selector like body div:nth-of-type(4) ul li:nth-child(5) a to check a certain link is not only obviously ugly, but also prone to changes in the markup. A small change could break half of your testsuite.
Adding ID attribute to all HTML elements of a web application?
We are using: Angular v6 / Material v2 / Protractor / Jasmine

We have been working on a React project for which we are doing e2e testing using 'Mocha-Nightwatch'. As a UI automation tester I needed something to access the elements, there were following options for me:
1) Using the "CSS selector", which is ugly and long as you mentioned.
2) Using The "X-path" of the element, which is again long and much more confusing
3) The best of all the "Id's" for elements [because they are unique throughout the app]. But the problem was when we gave id an element, React web pack will append a alphas numeric string to the id each time you build the application,making a unique id every time. So again id's failed in this scenerio.
4) The thing which we settled for was "Classes" for the elements which we wanted to access in testing.
As far is going the id or classnames is concerned, there is no shortcut in doing it. You need to give meaningful names for the id/classnames, some tool [which may or may not exist] will add some random id to all the elements which is not at all needed, and just increases the space complexity of your application.
The better solution is take up module by module and add class or id's[id they are not made dynamic by Webpack in you case] names by yourself.
The approach we used was we taught the automation tested how to add class names or id's, and how to inspect in the chrome dev tools, if the id's/classes really exist or not. But the limitaion of this is, the tester may add some classes or id which may conflict with your functionality. to solve this you can use a proper naming convention, for e.g. we use .test-something-something or #test-something-somethig as our convention for naming the test id's and classes.
Here is a sample from your selectors file:
usernameInput: '.test--auth-username > input',
passwordInput: '.test--auth-password > input',
loginButton: '.test--auth-submit > button',
loginError: '.test--auth-error',
inputError: '.test--inputField-errorText',
Hope this helps,
Cheers

Just a minor comment, it might be smart to use data-test-id (a custom data element) in favor of using the "regular" html5 ID. this allows you to benefit from plugins like: https://github.com/mukeshsoni/babel-plugin-remove-data-test-id-attribute, which in turn cleans up your production output.
I am not aware of any libraries that automatically assign test-ids to your elements (and most probably you want to be in control of where the test ID is added in the first place)

I don't recommend to assign id to each element on page. For automation we can use CSS Selector and XPath to locate element from page, finding element by ID is not the only way.
And if you choose to use automatical ID, you have to make sure the same element will always get the same ID when you build the app each time, otherwise the automation script have to change for each app build.
I will recommend to add ID to key element on the whole page, for example, we have one page and we divide the page into 4 areas: head, left side bar, student table, footer. We can only add ID on the container element of the 4 areas, so only 4 IDs we need to add, rather than all elements. And add css class name in class attribute on sub elements.
With above approach, automation script can use findElement chain as below:
// find the container element of area firstly
WebElement headArea = driver.findElement(<By.id('id of head area')>);
// find sub element within container element
headArea.findElement(<By.css('css selector of sub element')>);

Which JS added inline styles?

is there any way to check which JS script added inline style to particular DOM element? I've been trying to find it manually, but I suppose there is a better way...

If you are using chrome, you can right-click the DOM element you want to watch (in the element inspector of the dev tools), and select Break On - Attributes Modifications.
That's about the closest solution I know of.

I don't think there is a "signature" for a javascript outcome on DOM so i guess you have much choice but disabling one by one your scripts.
Other choice: make a global search with parts of the style in your text editor, it must be stocked somewhere in your code.