I'm using WebStorm from JetBrains to write my React code. But every time that I write some attribute inside a <Component> immediately the IDE adds me curly braces.
For example:
<Container
src={}
>
...
</Container>
I don't want to have the curly braces in my code, where can I change this? I was trying to look in JavaScript's and React's configuration, but I can't find it.
Please try setting Add for JSX attributes: to Quotes in Preferences | Editor | Code Style | HTML | Other to have quotes added always, or to Based on type to have either braces or quotes auto-completed depending on props type
You can control this behavior:
File | Settings | Editor | Code Style | HTML | Add for JSX attributes
The "Add for JSX attributes" setting is under the "Other" tab:
Related
I have the "Missing required 'title' element" inspection enabled under Editor > Inspections > HTML > Accessibility.
However, PhpStorm (currently on v2021.2) doesn't seem to know the difference between a React element (<Head />) and a regular HTML element (<head></head>) in this case:
This is inside of a .tsx file. Is there a way to ensure this inspection only runs on actual HTML elements instead of React elements?
Please follow WEB-52091 for updates.
For now, I can only suggest suppressing the inspection for file by adding
// noinspection HtmlRequiredTitleElement
at the top of it;
Or, you can create a custom scope in Settings | Appearance & Behavior | Scopes with only .html files included and specify this scope for HTML | Accessibility | Missing required 'title' element inspection
WebStorm autocompletes className= into className={} instead of className="" as it should.
Is there a way to fix or edit this?
please try changing Add for JSX attributes: value in Settings | Editor | Code Style | HTML | Other to either Quotes or Based on type - this should help
I have an issue with WebStorm and React.
Within the render function I type my HTML (JSX) and when I type an attribute for an element, WebStorm will autocomplete it with curly braces instead of speech marks.
Anyone any ideas?
You can control this behavior:
File | Settings | Editor | Code Style | HTML | Add for JSX attributes
The "Add for JSX attributes" setting is under the "Other" tab:
Yes, Attila's answer is correct. It's a bit confusing though. This screenshot will complement Attila's answer.
Is there a way to integrate angular's style guide into WebStorm?
In particular, auto imports use double-quotes instead of single quotes, and imports {Component} instead of { Component }, as well as export: [Component] instead of [ Component ].
This is really annoying to manually fix every time I need to reformat my code with CTRL+Shift+L
in Settings | Code Style | Typescript | Spaces, enable Within /
ES6 import/export braces
in Settings | Code Style | Typescript | Punctuation, set Use
to single
Not sure how to solve the imports issue but, for using single quotes,
Preferences --> Editor --> Code Style --> Typescript --> Punctuation(tab) --> Second line --> Use single quotes in new code
I am writing an automation test script using Robot Framework & Selenium2Library for testing our web application( in .txt format) . One of my test cases involves to check the CSS style attribute of an HTML tag.
Is there any specific keyword in Robot Framework to obtain the CSS style attribute of an html element?
Here is my testing scenario:
<div id="check_style" style="width:20px;height:20px;background-color:#ffcc00;"></div>
Now, I have to store the background color of this particular html tag into a variable ${bg_color}. Is there any specific keyword in Robot Framework to do this process?
Can you please suggest an effective way to handle this situation?
I think we can make use of this javascript function for the above mentioned purpose :
document.getElementById("check_style").style["background-color"]
But how to make use of this particular function to store the value of background-color inot a variable ${bg_color} ?
( I have tried to execute ${bg_color} = Execute Javascript document.getElementById("check_style").style["background-color"],
but didn't work ! )
You can use the Selenium2Library Get Element Attribute keyword to get the style attribute:
| | ${style}= | Get element attribute | id=check_style#style
You can then either use a regular expression to find the background color attribute or do some additional parsing. The latter would be easier to do in python than with robot keywords.
For example, if you understand regular expressions, something like the following might work. Of course, you'll probably want to add some bullet-proofing.
| | ${style}= | get element attribute | id=check_style#style
| | ${color}= | evaluate | re.search("background-color: *(.*?);", '''${style}''').group(1) | re
Note: you might not get the same literal value as is in the raw HTML. For example, on my machine ${color} comes back as rgb(255, 204, 0) even though the color in the HTML is #ffcc00.
For whatever reason I had a bunch of trouble getting this to work. I think it's because my CSS was defined in an external file (therefore pulling the style attribute came up empty).
Also note that RF now has changed the definition of Get Element Attribute to take two parameters, not one.
I'd like to pass along a great solution I found after a bunch of searching -- I found this amazing keyword here How to get the css style of text-overflow in robot framework
*** Keywords ***
Get CSS Property Value
[Documentation]
... Get the CSS property value of an Element.
...
... This keyword retrieves the CSS property value of an element. The element
... is retrieved using the locator.
...
... Arguments:
... - locator (string) any Selenium Library supported locator xpath/css/id etc.
... - property_name (string) the name of the css property for which the value is returned.
...
... Returns (string) returns the string value of the given css attribute or fails.
...
[Arguments] ${locator} ${attribute name}
${css}= Get WebElement ${locator}
${prop_val}= Call Method ${css} value_of_css_property ${attribute name}
[Return] ${prop_val}
after which I could simply run
${style}= Get CSS Property Value class:logo background-image
and do a plain text comparison. Sub in any CSS value for background-image and have fun with this!
Get css value using javascript in robot framework. link here
# Get element using Xpath in JavaScript.
${element}= Set Variable document.evaluate("${xpath_locator}", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
# Get css attribute value using getComputedStyle()
${attribute_value}= Execute Javascript return window.getComputedStyle(${element},null).getPropertyValue('${css_attribute}');
Log ${attribute_value}