I'm writing my first jQuery plugin with Grunt and TDD, and its been awesome so far. All of my tests are passing in the browser, and all but this one are passing in phantomjs/qunit.
But I'm sure I'm just missing something here. I have a test that gets the css value of the margin that is added with jQuery.
test('adds appropriate styles to image', 1, function() {
this.simpleString.adaminNumReplace();
var newMargin = this.simpleString.find('> img:first').css('margin');
strictEqual(newMargin, '0px', 'margin is equal to default');
});
The test passes when I use the runner to test in browser. And when I visually check in the inspector. And if I console.log the value. Everything appears to be fine and points to '0px'.
But in the terminal window, the test fails:
$.fn.adaminNumReplace() - adds appropriate styles to image
Message: margin is equal to default
Actual: ""
Expected: "0px"
at file:///Applications/MAMP/htdocs/adamin_number_replace/libs/qunit/qunit.js:357
Is there any reason that phantomjs wouldn't be able to grab the css margin value? It says Actual is "". But it is definitely '0px'.
Any insight or thought would really be appreciated!
The full repo is here, in case it helps: Github Repo
Okay. So I was able to figure this out. I'm not totally sure as to why. But calling the css shortcut
.css('margin')
returns nil in the terminal. But does work in the spec runner.
However, calling the specific:
.css('margin-top')
Does in fact return '0px' which is what i was going for here.
So it looks like the answer, in case anyone else might run into this:
I am not able to return css values when using a shortcut like 'margin' or 'padding'.
Use specifics like 'margin-top', 'padding-left' etc...
hope that helps someone else...
Related
i'm trying to run a simple Cypress scenario.
Access this url : https://www.harmonie-mutuelle.fr/ and close the pop-up that appears.
But the pop-up seems to have a weird behavior. It doesn't appear in the navigator on the right when i run my test but it appears in the middle of the screen as if it was a Cypress pop-up (i don't know if i'm clear)
Here is a my code :
cy.viewport(1920, 1080);
cy.visit('https://www.harmonie-mutuelle.fr/');
cy.get('#popin_tc_privacy_container_button > button').eq(2).click();
Any ideas as to how i can close that pop-up ?
ok managed to find a solution. Here's a way to do it using wrap if anyone needs this :
cy.visit('https://www.harmonie-mutuelle.fr/').then(() => {
cy.wrap(window.top.document.querySelector('#popin_tc_privacy_button_3')).click();
});
Nothing really wrong with your approach, but to explain what's happening -
Cypress commands like cy.get() starts searching at the <body> element. You can modify it using the .within() command.
Most commonly used to set the root element to a descendant element of <body> but should also work to move it to the parent <html> element, which is what your test requires.
cy.visit('https://www.harmonie-mutuelle.fr/');
cy.document()
.find('html')
.within(() => {
cy.get('#popin_tc_privacy_container_button > button').eq(2).click()
})
Background:
I'm writing test automation for a React web application, using Cypress. In the application I have a dialog box in which there are elements I need to click. When I try to click any of these elements normally, Cypress gives me an error that the element in not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: 'hidden', 'scroll' or 'auto'. Because these DOM elements are generated by some 3rd party React components, I cannot change this, and the only way I can work-around it is to use {force:true} in the click command.
The problem:
Because I have few of these elements and in order to keep the DRY principle, I wanted to create a custom child command named forceClick that simply wraps subject.click({force:true}). However, for some reason, when I do that, Cypress does not perform the click command at all!
Note: For debugging purposes I added a cy.log command to the custom command as well, and strangely enough, I see that this log command is executed and only the click command doesn't.
Here's the code:
Cypress.Commands.add('forceClick', {prevSubject:'element'}, subject => {
cy.log('forceClick was called!');
subject.click({force:true})});
And inside my test I have the following line:
cy.get("[data-test='panel-VALUES']").forceClick();
Note that if I change it to the following line, it works as expected:
cy.get("[data-test='panel-VALUES']").click({force:true});
Any idea why the click command isn't executed by the forceClick custom command?
You are almost there, you just missed that you have to wrap the subject if you want to work with it.
Cypress.Commands.add('forceClick', {prevSubject: 'element'}, (subject, options) => {
// wrap the existing subject and do something with it
cy.wrap(subject).click({force:true})
})
I never saw a solution with subject.click({force:true}), I'm not saying it won't work, but I just never saw it before. What works anyway is this:
Custom command:
Cypress.Commands.add('forceClick', {prevSubject:'element'}, subject => {
cy.log('forceClick was called!');
cy.get(subject)
.click({force:true})});
}
Test step:
cy.forceClick('[data-test="panel-VALUES"]');
If you only use the forceClick you could even shorten it further to this:
Custom command:
Cypress.Commands.add('forceClick', {prevSubject:'element'}, subject => {
cy.log('forceClick was called!');
cy.get(`[data-test=${subject}]`)
.click({force:true})});
}
Test step:
cy.forceClick('panel-VALUES');
I have a scenario where I'd like not check IF an element exists and is visible/clickable. If not, script processing continues.
While Laravel Dusk provides $browser->assertVisible($selector) method, this ends up in an exception if the element is not visible. Or $browser->waitFor('.selector'); but this also ends the script processing if element doesn't appear.
Here is the criteria Selenium uses to check for an element being visible is found here: How to force Selenium WebDriver to click on element which is not currently visible?
Apparently Dusk doesn't provide this kind of method. What would be the best way to implement it?
Better late than never I suppose.
isDisplayed() works pretty well (though not if it's covered up by other elements)...
if($browser->driver->findElement(WebDriverBy::cssSelector('#my-selector'))->isDisplayed()) {
// do something
}
if I have overlays covering my elements, I use ->waitUntilMissing(), or in extreme cases I call on $browser->driver->executeScript() and run some jQuery to temporarily manipulate an element that is "in the way".
You can try to find the element and try to retrieve properties of it. If the properties are empty, the element is not visible. E.g.
$hiddenBtn = $browser->element('#show-more');
if($hiddenBtn && $hiddenBtn->getText()){
$browser->click('#show-more');
}
This worked for me.
Without a good idea of what you're trying to accomplish you can always wait until the element is visible:
https://laravel.com/docs/5.5/dusk#waiting-for-elements
I'm just working on a little webservice. Therefore I am using an AJAX call and append my data to a table on my website. Here I can read and update already existing entries or write new entries. Everything works fine.
I want to have the possibility to update already existing with the wysihtml5 editor. I already integrated this editor on my website and I can use it on new entries. That works, too.
But now there's the problem with existing data. When it comes to the form to update data, I want the existing data being displayed as the value. Everything works fine on all inputs, just the wysihtml5 don't work.
I already know that there's an iframe and that's why I can't set the value of the textarea. I searched for a solution and found the following code (last line):
var editor = new wysihtml5.Editor("textareaid", { // id of textarea element
toolbar: "wysihtml5-toolbar", // id of toolbar element
parserRules: wysihtml5ParserRules, // defined in parser rules set
});
editor.setValue('Here's the content', true);
Usually this should work, but no content appears and the console just tells me:
Error: wysihtml5.Sandbox: Sandbox iframe isn't loaded yet
I tried it with a timeout-function but nothing works. Searching on the internet it also seems that there is noone else with that problem. I hope you can help me out, would be great!
Is there a way to set the value?
This code work for me
$("#product_details").data("wysihtml5").editor.getValue();// to get the value
$("#product_details").data("wysihtml5").editor.setValue('new content')// to set the value
I got the solutions, below code worked for me
$('#id ~ iframe').contents().find('.wysihtml5-editor').html(my_html);
This work for me
$('.wysihtml5-sandbox').contents().find('.wysihtml5-editor').html(my_html);
the ".wysihtml5-sandbox" is a class name of iframe, create by wysihtml5 by default.
I finally got it working by myself. I just change the second parameter of setValue to false. I don't know why, but it works then.
this code worked for me :
var wysihtml5Editor = $('#text_editor').data("wysihtml5").editor;
wysihtml5Editor.setValue("<p>foobar</p>", true);
console.log(wysihtml5Editor.getValue());
I missed a "=",
should be:
if(maxi - 1 == i)...
but firebug didn't report anything.
And it took quite a while for me to found it.
Is it a bug of firebug?
It works perfectly for me. I am using Firebug v1.4.2.
Additional add-ons: Google Page Speed, YSlow, Firecookies
My code:
<script type="text/javascript">
var max = 5;
if(max - 1 = 4){
alert(true);
}
</script>
Screenshot:
screenshot http://img12.imageshack.us/img12/451/21986504.th.jpg
I have a "Invalid assignment left-hand side" error for the example you've provided.
EDIT:
As described by Asker - the error was in a JS file. I've done an include like this. Same thing, the error was also tracked.
screenshot http://img17.imageshack.us/img17/8462/31594029.th.jpg
Conclusion
I think its that, when you load the page, Firebug is not activated. When you activate after page has loaded, the error was not captured. Thus you see no error. If you keep Firebug activated and open the page, you might just see the error logged.
Hope this helps!
Firebug is not necessarily the be-all-end-all of code problems. It is only a tool to help you find bugs. It's impossible to write a tool to find every single bug in a program (if only...).
To be fair, nothing in your toolbox found it -- why place the blame only on Firebug? You missed it, your text editor missed it, and your unit tests missed it, at least.
For example, if I type that expression in my editor, it's underlined in orange, and the status bar says:
Test for equality (==) mistyped as assignment (=)? (parenthesize to suppress warning)
Why wait until your code gets to your web browser to see if it worked? There are many steps before that which are great for verification and testing. The sooner you identify problems, the easier they are to fix.