I have question regarding the development and testing workflow. I am using Cypress but this topic is suitable for any end to end test.
The question is how do you selecting the elements in the browser?
1, Explicit selectors like data-cy or automation-id on each element or component.
2, Selecting the elements by visible text on the screen and then navigate to specific element by DOM hierarchy.
Every test you write will include selectors for elements. To save yourself a lot of headaches, you should write selectors that are resilient to changes.
Oftentimes we see users run into problems targeting their elements because:
Your application may use dynamic classes or ID's that change
Your selectors break from development changes to CSS styles or JS behavior
Luckily, it is possible to avoid both of these problems.
Don't target elements based on CSS attributes such as: id, class, tag
Don't target elements that may change their textContent
Add data-* attributes to make it easier to target elements
<button
id="main"
class="btn btn-large"
name="submission"
role="button"
data-cy="submit"
>
Submit
</button>
And then for example clicking to button
cy.get("[data-cy=submit]")
.should("be.visible")
.click()
You can also search for specific text in dom.
cy.get("button")
.should("be.visible")
.contains("Submit")
.click()
Custom commmands commands.js
Cypress.Commands.add("sendBtn", () => {
cy.get("[data-cy=cy_send_btn]")
.should("be.visible")
.click()
})
And in test file
it("Add test description here", function() {
.
.
.
.
cy.sendBtn()
})
Custom command shown above you will be able to use multiple times in other test files for all send buttons. Your tests will be more isolated and efficient.
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:
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}
I have a text editor (textAngular) that I've modified to limit the number of valid HTML tags I can generate using that tool. Now, I want to only support a limited number of HTML elements (h3, h4, h5, h6, ol, ul) to produce a news story but I want to disable some of the valid HTML rendered by ng-bind-html. Namely, I want to remove , tags as a valid tags because they could have disastrous results for this user generated content.
Is it possible to remove and tags as something rendered by ng-bind-html?
Unfortunately no, it isn't possible to config the valid HTML tags.
The ng-bind-html use the $sanitize service to strip invalid tags/attributes, and you can see in the source code that all the configurations are private.
// Safe Block Elements - HTML5
var blockElements = angular.extend({}, optionalEndTagBlockElements, makeMap("address,article," +
"aside,blockquote,caption,center,del,dir,div,dl,figure,figcaption,footer,h1,h2,h3,h4,h5," +
"h6,header,hgroup,hr,ins,map,menu,nav,ol,pre,script,section,table,ul"));
// Inline Elements - HTML5
var inlineElements = angular.extend({}, optionalEndTagInlineElements, makeMap("a,abbr,acronym,b," +
"bdi,bdo,big,br,cite,code,del,dfn,em,font,i,img,ins,kbd,label,map,mark,q,ruby,rp,rt,s," +
"samp,small,span,strike,strong,sub,sup,time,tt,u,var"));
If you really want it, one way you could do is to copy the angular-sanitize.js and modify the valid HTML tags configuration directly.
Please note that if you do it that way, all the ng-bind-html in your entire application will be also affected. If that is undesired, you have to write your own custom directive and inject/use your modified version of $sanitize instead.
If you're into modifying textAngular already, you could modify something around the taCustomRenderers Section of the code and use ta-bind instead of ng-bind-html. They do nearly the same thing except ta-bind runs all the extra renderers.
Custom Renderers Code: textAngularSetup, textAngular - probably in this one you can do your stripping out of unwanted code.