How do I take an iframe if I have two with the same classes and neither eq() nor first() works when I use cy.iframe().
Here is the error:
Each radio is made up of a 'form' and inside each one contains the respective iframe.
But I only want to take the one that is checked
*
This is my script
I'm guessing you're using cypress-iframe since cypress doesn't have a built-in iframe command available.
As you can tell, iframe() allows passing a selector. If your iframe tags are identical in their attributes so you cannot use attributes to select, or you just want to use the order, note that you have to use that as part of the selector. Instead use a selector that has the order part of it such as :first or :nth-child(n)
// will NOT work
cy.iframe().first()
cy.iframe().eq(1)
// will work
cy.iframe("iframe:first")
// for 2nd item use 2, since it uses a 1 based index
cy.iframe("iframe:nth-child(2)")
I can't see why cy.iframe('iframe:first') would not work, but if you have independent parent elements, e.g the <form> element mentioned, it's possible to pre-select the correct parent and apply cy.iframe() using that parent as "root" element.
The .within() command changes the root element:
cy.visit('/', {
onBeforeLoad(win) {
cy.stub(win.console, 'log').as('consoleLog')if you
}
})
cy.get('#consoleLog').should('be.calledWith', 'Iframe Loaded')
cy.get('iframe').eq(0)
.parent()
.within($iframeParentElement => {
cy.iframe()
.should('have.length', 1) // expected <body> to have a length of 1 ✅
.find('input#data')
.should('have.length', 1) // expected <input#data> to have a length of 1 ✅
})
I also added a check on the "IFrame Loaded" console message that Tokenex emits, so as to delay <iframe> commands until loading is complete.
Related
I have a website I'm building and I want to have a custom cursors specified for each property like hand, wait, pointer, default, move and so on...
I'm build an operating system website so I want to have custom cursors.
Here is the CSS code.
* {
cursor:url("../.drive/system/visual/cursors/pointer.png"),pointer;
cursor:url("../.drive/system/visual/cursors/hand.cur"),hand;
cursor:url("../.drive/system/visual/cursors/pointer.cur"),default;
cursor:url("../.drive/system/visual/cursors/move.cur"),move;
cursor:url("../.drive/system/visual/cursors/move.cur"),all-scroll;
cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),col-resize;
cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),e-resize;
cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),w-resize;
cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),row-resize;
cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),n-resize;
cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),s-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-1.cur"),se-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-1.cur"),nw-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-2.cur"),sw-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-2.cur"),ne-resize;
cursor:url("../.drive/system/visual/cursors/move.cur"),grab;
cursor:url("../.drive/system/visual/cursors/move.cur"),grabbing;
cursor:url("../.drive/system/visual/cursors/unavailable.cur"),no-drop;
cursor:url("../.drive/system/visual/cursors/unavailable.cur"),not-allowed;
cursor:url("../.drive/system/visual/cursors/text.cur"),vertical-text;
cursor:url("../.drive/system/visual/cursors/text.png"),text;
cursor:url("../.drive/system/visual/cursors/wait.cur"),wait;
cursor:url("../.drive/system/visual/cursors/help.cur"),help;
cursor:url("../.drive/system/visual/cursors/precision-select.cur"),crosshair;
}
The only cursor that happens to load is the one at the bottom (crosshair)
I've also specified some PNG cursors aswell and they did not change the outcome.
I tried putting this into html,body{} and div{} but again nothing worked.
I want something like on Windows93 but without JavaScript
If there is no CSS-only method then I can accept JavaScript ones. But please only vanilla-js.Thanks!
The cursor values are overwriting each other. This means that the last value is the only one that works, as it is the last one to overwrite the cursor value.
The word that follows the URL is a fallback keyword. This means that if the image cannot be found or rendered, the cursor specified by the keyword will be drawn.
For example, with the property cursor: url("../.drive/system/visual/cursors/precision-select.cur"), crosshair;, the browser will attempt to draw the cursor specified in the URL, but if it cannot it will use the default crosshair cursor.
To get the browser to display different cursors you will need to specify the cursor for each element. For your default cursor you would have:
* {
cursor:url("../.drive/system/visual/cursors/pointer.cur"),default;
}
To get a pointer over links you might then do:
a {
cursor:url("../.drive/system/visual/cursors/pointer.png"),pointer;
}
For crosshairs on a particular element you might try:
.target-element {
cursor:url("../.drive/system/visual/cursors/precision-select.cur"),crosshair;
}
You need to specify the cursor property for each element that you wish to have a changed/custom cursor. Using a universal selector for the default cursor ensures that you only specify the property for elements that require it.
I am trying to use paper-dialog within my custom component.
I want to be able to open the dialog from outside the component. What is the best way to do this? (all the examples work directly on the component)
Also the dialog requires me to call "open()" on it to open it.
In the examples I found I found:
this.$.dialog.open();
But this doesn't seem to work with lit-element
I got it to work using shadowRoot, not sure this is the best option:
render() {
return html`
<style>
</style>
<paper-dialog id="dialog">
<h2>Content</h2>
</paper-dialog>
`;
}
firstUpdated(changedProperties) {
console.log("firstUpdated called")
if (this.shown == "true")
{
// this.$.dialog.open();
this.shadowRoot.getElementById("dialog").open()
}
}
I added a property to my element called "shown"
static get properties() {
return {
shown: Boolean,
Thinking I could pass this from the outside into my component, but it doesnt seem to do the trick either (I can set it once with the custom element propery, but changes to it from the out side dont seem to work.
Generally, if you are aggregating a dialog within an element that has other UI elements then you shouldn't be showing/hiding the dialog from outside the element - the event that triggers the dialog should be raised and handled with the containing element.
That said, if it's absolutely necessary, then I prefer a "showDialog" method (not a property). Closing the dialog should be triggered by a dialog button or loss of focus, so you don't need to expose a close method.
Under certain circumstances I am setting the css property "pointer-events:none" to avoid an element being clickable (it is a complex element which cannot be disabled one by one and which it is wrapped by a div and this div has the pointer-events to none)
So what used to be clickable and tested like that, it is not anymore.
When I try to test it I always get this:
Failed: unknown error: Element is not clickable at point (167, 407). Other element would receive the click:...
Which is expected because as the element is not clickable, the parent element gets the click.
My question is, how to test with Protractor/Jasmine an element which is not clickable by setting this property (pointer-events)?
By the way, the commonly used methods isEnabled and isDisplayed, both of them return true.
I also thought about creating a test which expected the error (although I would prefer a cleaner solution), with toThrow() or ToThrowError() but it didn't work at all.
Thanks
You can try special EC for this -
http://www.protractortest.org/#/api?view=ExpectedConditions.prototype.elementToBeClickable
Example:
var isClickable = protractor.ExpectedConditions.elementToBeClickable($('your element here'));
expect(isClickable()).toBeFalsy('Element expected not to be clickable');
I met the same problem - how i do assertion that i cannot click on element -
myElement.click().then(
() => {
fail("Element should not be clickable for Observer");
},
(err) => {
expect(err.message.toString()).toMatch("Element is not clickable at point");
});
Putting error callback and asserting that correct error was thrown.
I'm doing functional testing using CasperJS's test class, and can't seem to select elements by their text values. My goal is to check that a class of div is visible, and then check it has the value I expect.
I've tried using the CSS3 selectors mentioned on CaspersJS' selector page, but must be doing something wrong. None of the following work for me (all enclosed in ""):
div#myid[text()='sometext']
div#myid[text='sometext']
div#myid[text=sometext]
div#myid:contains('sometext')
div#myid:contains(sometext)
Any pointers as to how I can select a specific element based on it's text value?
Try:
var x = require('casper').selectXPath;
this.test.assertExists(x('//*[#id="myid"][text()="sometext"]'), 'the element exists');
Thanks for the comments above - I ended up going with using jQuery (as it was being loaded on the client) through evaluate() calls in the CasperJS tests.
This one is bit tricky ,
I created jsfiddle here
http://jsfiddle.net/WXmcL/10/
to kinda replicate the https://chrome.google.com/webstore/category/home
addons containers. all is fine except that a element link.
I need to position the
<a class="link" href="linktoapp"></a>
correctly but also let the users reach the
Info1
since I cant have any ul or divs inside the a element I am not able to achieve this effect. Yes I can do spans but my ratings contain ul , divs etc and I would have more markup inside it. If you check on chrome store you can always link to the app and in same time reach the rating. They put all the elements inside the a tag but the page validation is not seeing it. So it seems to me that is being done with js on load or ?
Thank you!
you should forget about validation whilst you are building your effects for a while. get it to work with the markup you need, then you can sit back and take away what won't validate and inject it via javascript.
mootools has a wonderful Element constructor.
new Element("a.linktoinfo[html=Info]").inject(element);
you can pass on any property into it via the constructor options object.
eg.
new Element("a", {
"class": "foo",
"href": "#",
"events" : {
click: function() {
showInfo(this.getParent());
}
}
}).inject(element.getElement("a.link", 'after');
etc etc.
btw when you morph classes, just make sure it morphs the properties you differ. in your case, it makes sense to make .myInfoOn / .myInfoOff that have the different heights. there is no point in assigning a morph between other values that have not been changed.
that type of morph parses all the css rules defined in the class that you pass on every event and in reality, you are better off setting it manually. it will scale less if it's hardwired, I realise that - but you can set as a variable into your class.