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
Related
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:
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.
There is this WebStorm beast, I like it, and it provides good services when I edit/develop my Angular.js application, but the code inserted automatically, protecting me to enter that code, is not fit for TSLint rules created also automatically by angular-client.
Example:
I created a new module (AModule) which should be included by another module (module B). When I enter AMdule in the import section of BModule then the intellisense offers me AModule and I hit enter and the module will be imported. But, it is imported this:
import {AModule} from "./services/AModule/AModule.module";
And I want this:
import { AModule } from './services/AModule/AModule.module';
I haven't found so far how can I make changes in these templates. How can I make changes like this? I searched for templates but they deal with something else in WebStorm.
Check Es6 import/exports braces"
in Settings | Code Style | Typescript | Spaces, enable Within /
ES6 import/export braces
in Settings | Code Style | Typescript | Punctuation, set Use to single
Note that you can import code style prerefences from your tslint.json : open it in editor and click 'Yes' when prompted to apply settings. See https://blog.jetbrains.com/webstorm/2017/01/webstorm-2017-1-eap-171-2455/, Import code style from tslint.json
you have to look into
setting > search for Live template > find the snippet you want to edit
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}