I need to change the value of one of the parameters in the sessionStorage but I'm not even sure if this is possible through Cypress. Couldn't find any useful information about this in their documentation.
This is the javascript code that I'm trying to run with Cypress without any success:
var data = JSON.parse(sessionStorage.getItem("vuex"))
data.country = "DE"
sessionStorage.setItem("vuex", JSON.stringify(data))
It works perfectly fine if I execute it in the console but I don't know how to make it work with Cypress.
Even if I write a simple javascript code like
console.log(sessionStorage.getItem("vuex"))
It returns Null with Cypress.
Does anyone have any idea why I am getting null for this javascript code and if this operation is even possible with Cypress?
Found the solution:
cy.window().then( win => {
var data = JSON.parse(sessionStorage.getItem("vuex"))
data.country = "DE"
sessionStorage.setItem("vuex", JSON.stringify(data))
})
Related
I have set up my jasmine framework using the steps mentioned here, but when I try to use jasmine keywords like browser.open to open a URL in the Browser I get an error browser not defined. When I use require to get another page, it gives Reference error: module not found.
Also, with my jasmine package, I did not get the specRunner.html.
I have tried installing protractor also and different approaches, but it's not working.
I need to set up jasmine framework for UI automation, can anyone help me with the exact set up and issues that I am facing right now?
The jasmine library is not related to browser automation. It is a library about testing. It does not define the browser object. I'm not sure which library you expect to require. Perhaps you want to use Selenium. In particular, you will want to look at the WebDriver API.
It allows you to do things like this:
var driver = new webdriver.Builder().build();
driver.get('http://www.google.com');
var element = driver.findElement(webdriver.By.name('q'));
element.sendKeys('Cheese!');
element.submit();
driver.getTitle().then(function(title) {
console.log('Page title is: ' + title);
});
driver.wait(function() {
return driver.getTitle().then(function(title) {
return title.toLowerCase().lastIndexOf('cheese!', 0) === 0;
});
}, 3000);
driver.getTitle().then(function(title) {
console.log('Page title is: ' + title);
});
driver.quit();
I am using React for render and Jest/Jasmine for test. I have test written using old Jest/Jasmine waitsFor and runs but these are gone now in Jasmine 2 and I am not sure how to replace with new done asyncs.
In my code React renders a small page about a user. That page has an AJAX call to fetch user posts. I want to test that user posts have come back nice, and waitsFor was very, very good at this: wait until user has some post, then continue.
I looked online at lots of people talking about using AJAX calls inside Jest test which is not what I want. My Jest test has no idea about AJAX call being made, so I need a way to wait until results come back.
Here is my current code with waitsFor and runs:
it('loads user post', () => {
var page = TestUtils.renderIntoDocument(
<UserPage params={{user: 'fizzbuzz', 'pass': 'xxx'}} />
);
waitsFor(() => {
return page.state.posts.length > 0;
}, "post loaded", 10000);
runs(() => {
var posts = TestUtils.scryRenderedDOMComponentsWithClass(page, 'post');
expect(posts.length).toEqual(10);
});
});
How can I delete the waitsFor and runs and replace with Jasmine 2.0 code that works? All Jest test knows is that page.state.posts.length must be greater than 0 before expecting anything.
You should refactor this test into two unit tests that will provide a more rigorous testing of your code. It would make the tests more independent of one another and help identify errors in a more refined scope. These won't be exact as I do not know what your code is like, but here's something along the lines I would expect to see: -
it('generates the expected properties for a page', function () {
var page = TestUtils.renderIntoDocument(
<UserPage params={{user: 'fizzbuzz', 'pass': 'xxx'}} />
);
expect(page.someProperty).toBeDefined();
expect(page.user).toEqual('fizzbuzz');
});
it('generates the correct number of posts from a given page object', function () {
var fakePage = {
// put your fake mock data here that TestUtils expects
};
var posts = TestUtils.scryRenderedDOMComponentsWithClass(fakePage, 'post');
expect(posts.length).toEqual(10);
});
I am not too sure what is happening in your renderIntoDocument function so the top test may be a little broken... It looks like there is either too much going on inside the function, or you need to test the calls that function is making instead. If you elaborate on what it does I'll edit the answer.
I am trying to test a function using mocha/sinonjs. The function I want to test is responsible for showing or hiding some element in my DOM.
This is my function
var updateUI = function() {
$('#login').show();
$('#logout').hide();
};
I tried to mock using sinon but I'm not sure if it is possible or the correct thing to do in this case.
This is what I have tried but I keep getting an error "TypeError: undefined is not a function" during the expect call
var mockLogin = sinon.mock($);
mockLogin.withArgs('#login').expects("show").once();
I simple want to test my 2 jquery calls have been called. I tried to use spies but continue to get exceptions
Looking further into the sinon doc I found that the following worked for me.
var jQueryShow = sinon.stub($.fn, 'show');
var jQueryHide = sinon.stub($.fn, 'hide');
jQueryShow.callCount.should.be.equal(1);
jQueryShow.thisValues[0].selector.should.be.equal("#login");
jQueryHide.callCount.should.be.equal(1);
jQueryHide.thisValues[0].selector.should.be.equal("#logout");
I'm not sure if there an easier way but it checks for the selectors I need
I am developing a mobile web app using Kendo UI Mobile. Whenever we make any AJAX calls, or our DataSources make them we call app.startLoading() to show the loading icon to the user. This works very well.
However, depending on the context in which the call is made we would like to change the text that is displayed along with the loading icon. I know you can define this when I create the kendo.mobile.Application instance. How can I change it afterwards?
The documentation does not suggest a way to do this, and a browse of the source code did not help me either. Is this really not possible?
EDIT: This is using Kendo UI Mobile v.2012.3.1114
I usually make a "utility" function to do this:
var _kendoApp = new kendo.mobile.Application(document.body, {});
var showLoading = function (message) {
_kendoApp.loading = "<h1>" + (message ? message : "Loading...") + "</h1>";
_kendoApp.showLoading();
};
I am also setting a default message of "Loading..." if one isn't passed in.
Edit:
I could have sworn that worked for me in a past app I did, but judging by thr source, I think you are right, my answer above shouldn't work. My best suggestion is to add a class to the message element so you can target it, and use jQuery to change the text.
var _kendoApp;
var showLoading = function (message) {
$(".loading-message").text(message ? message : "Loading...");
_kendoApp.showLoading();
};
_kendoApp = new kendo.mobile.Application(document.body, {
loading: '<h1 class="loading-message">Loading...</h1>'
});
i'm learning Ajax and i'm facing some problem with this very basic function:
function fetchData(url, objectID){
var pageReqtest=null;
if(window.XMLHttpRequest)pageRequest=new XMLHttpRequest();
if(window.ActiveXObject)pageRequest=new ActiveXObject("Microsoft.XMLHTTP");
else return false;
pageRequest.onreadystatechange= function(){
var object=document.getElementById(objectID);
object.innerHTML = pageRequest.responseText;
}
pageRequest.open("GET",url,true);
pageRequest.send(null);
}
And then i have:
<div id="control" onclick="fetchData('data.jsp','message');">Click here for Ajax!</div>
But unfortunatelly its not working, the function though is correctly called.
I have my project in Eclipse and i'm running this on Tomcat 6, the page data.jsp its a single line of html, the data.jsp is positioned at the same lavel as the page where the javascript function is written
Do you have some advice?
beside wrong spelling as mentioned by lonesomeday
you also have missing parameter here var object=document.getElementById();
Looks like others beat me to it, but in any case, here is working fiddle: http://jsfiddle.net/smendola/BcMMn/
As they said, typos...
My best bet is that it is a syntax error caused by your misspelling of function:
pageRequest.onreadystatechange= fucntion(){
This would cause the Javascript not to be parsed, so your function would never be defined.
On a different note, there are a couple of other little errors that, while they might not prevent your code working, might make your life difficult.
var pageReqtest=null;
Elsewhere you call the variable pageRequest. Be consistent: at the moment, you are creating a global variable called pageRequest and completely ignoring the local one pageReqtest.
if(window.XMLHttpRequest)pageRequest=new XMLHttpRequest();
if(window.ActiveXObject)pageRequest=new ActiveXObject("Microsoft.XMLHTTP");
else return false;
If the browser has both window.XMLHttpRequest and window.ActiveXObject, you will create both, first the XMLHttpRequest object, then you will overwrite it with the ActiveXObject. This isn't what you want – it's suboptimal and it's better to use the proper XMLHttpRequest if it's available.
The quick way to do this is to make the second line else if at the beginning.
And you miss out the id in the getElementById call:
var object=document.getElementById();
I think this should be:
var object = document.getElementById(objectID);