I am writing tests for a React based web tool. So I want to clear all local storage such as login information etc. before each test. I have majorly worked in Cypress, where this was just a simple command.
cy.clearLocalStorage();
I am now using WebdriverIO and this is the approach that I was trying out (in the test file).
afterEach(() => {
browser.executeScript('window.localStorage().clear()');
});
However, this doesn't seem to be working. Moreover, I would prefer a global solution, something that I don't have to write in each test. Thanks in advance for the help.
From the WebdriverIO Docs:
// remove the storage item for the given key
client.localStorage('DELETE', 'someKey');
// clear the storage
client.localStorage('DELETE');
You can clear localStorage by running this preset function.
You were almost right in your assumption. I'd suggest using official docs to eliminate minor errors.
Instead of executeScript use https://webdriver.io/docs/api/browser/execute.html
localStorage is not a function, see https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
So it should be
afterEach(() => {
browser.execute('window.localStorage.clear()');
});
P.S.
Assuming you are using WebdriverIO 5 or above.
So, after a lot of time, we realized the problem.
The cy.clearLocalStorage() cleans only the local storage under the baseUrl definition.
If you would like to open multiple pages, you have to explicit define the clearing in the cy.visit() call, like that:
cy.visit(`subdomain.another.domain`, {
onBeforeLoad(win) {
win.localStorage.clear();
},
});
In this case, the local storage for the exact domain, will be deleted.
I hope, this workaround helps.
Related
I'm writing a nuxt module following this guide.
Now I would like my module to add a proxy rule to the host application. Its a lot of guesswork and nothing has done the trick so far. I tried
nuxt.options.proxy.options.push(
{
target: 'https://target-url.com',
changeOrigin: true,
pathFilter: ['path/to/match']
}
)
}
but my IDE complains that proxy is not a known property of NuxtOptions. I did shorten the above code for the sake of this post. In my code I also made sure the respective objects exist before assigning something to them.
next best guess (based on the example for adding a css library) was to do the same thing, but on the runtimeConfig like so:
nuxt.options.runtimeConfig.proxy.options.push(...)
no complaints by the IDE anymore (duh, the runtimeConfig object is of type any) but no sign of the proxy actually working.
consider this existing data in a Firebase Realtime Database
db.ref('path/to/child').once('value')
{
"data":{
"this":"value",
"that":"value"
}
}
consider this set operation to the original data
db.ref('path/to/child').update({"data":{"this":"newValue"}})
{
"data":{
"this":"newValue",
}
}
how do we perform an update so that the unchanged data is preserved
db.ref('path/to/child').foo({"data":{"this":"newValue"}})
{
"data":{
"this":"newValue",
"that":"value"
}
}
Right now, your code is telling Firebase to update the entire data child under path/to/child. Instead, you should reference the most deep path to the final child node you want to update:
db.ref('path/to/child/data').update({"this":"newValue"})
Note that I've put data in the reference, instead of the object to update.
I had the same issue but the example above didnt work. I came to the same conclusion based on the docs which also didn't work. It still overwrote the content in "data".
Testing with a slash after data (in my case the object key) worked for me. Maybe I'm still misunderstanding something about how this works, but thought I'd add this incase anyone else hit the same issue. If I'm wrong, please explain.
This did work exactly as I expected.
db.rev('path/to/child/data/').update({"this": "newValue")
// almost exact path I use on some random test data
// path -> root/userid/list/listid/
db.rev('user/2FsJBrxZHQFff61QkMIuTV49KBUcQ2/list/MOwh_FwDmlKbxsfUmZS/').update({"name": "newValue")
I am working on a website with React.js and asp.net mvc 4, I am planning to use Flux as my front-end architecture, but I met some problems and was very confused about the use of Flux:
In the beginning,I thought Flux would be a perfect front-end architecture in my website,but after I read a lot of articles about Flux, I find that they are nearly all with NodeJs,even the demos from facebook team,that means they all do the rendering stuffs of React.js/Flux code in server side,right? but How can I use Flux in the client side ,I mean in the user's browser?
I am very confused,am I wrong if I treat react.js/flux as a client side solution?If I am not wrong, but why they all use them with NodeJs and ES6(like facebook Dispatcher.js), That's ok in server side,but what about client side ? most of user broswers don't support ES6. I tried using Babel to convert Dispatcher.js from ES6 to ES5,but the es5 version had some errors and didn't work.
And I also found some implements of Flux that claim to support client side,like fluxxor,but I don't have a chance to try it before I write this post,because I am too confused.
I hope someone can help me to figure out these problems.
ps. Sorry for my english,if you don't understand my words,pls let me know , I will explain it.
I think you want :
$ bower install flux
Then you could do something like this (if using require.js):
require(
['bower_components/flux/dist/Flux'],
function(
Flux )
{
var dispatcher = new Flux.Dispatcher();
dispatcher.register(function(payload) {
if (payload.actionType='test') {
console.log('i got a ', payload);
}
});
dispatcher.dispatch({
actionType: 'test',
otherData: { foo: 'bar' }
});
});
(This answer uses : https://bower.io/, https://libraries.io/bower/flux, http://requirejs.org/)
React is a client side library. You can serve a React App with virtual any backend language. The reason a lot of examples are with node is because it is easy and fast to set up.
You should try this tutorial:
https://facebook.github.io/react/docs/getting-started.html
It is pretty straight forward and doesn't require node.
Also maybe you should try starting to serve the React app statically at the beginning to better understand React itself.
ES6 works in Browsers thanks to Babel. If you believe you have any trouble with Babel, you might want to first play around with it's REPL to get a feeling for it: https://babeljs.io/repl/
The idea is that the code can run on the client and server (universal js, used to be called isomorphic javascript (though it goes a little further then that with serverside rendering etc..),
There are many flux implementations reflux is the most promising at this point , im using martyjs (but they stopped the development, it will be taken over by alt) but even for the flux architecture, u just get the dispatcher / event emitter and some ideas :D,
Shorty said u can install the npm packages (flux, react , babel) etc, but u need something like http://browserify.org/(with reactify) or Webpack, to run them in the browser. U don't need to run them on a node js "after its bundled", webpack/browserify will bundle the code so it can used within the browser independently
https://github.com/christianalfoni/flux-react-boilerplate/ <-- ther are some boilerplate, that provide some nice guide on how to bundle the code.
I'm using Meteor to query a MongoDB collection. The query is currently using the wrong index. With raw Mongo, it is possible to pass a hint to a query to use a specified index. Is there any way to do this from within Meteor directly?
This can be done directly inside of Meteor using the $query: $hint: syntax. It is worth noting that using the sort option instead of $orderBy: seems to cause Meteor to complain.
Example:
Meteor.collection.find(
{ $query:{
//query goes here
}, $hint: {
"indexField1": 1, "indexField2": 1, "indexField3": -1
}, $orderBy:{
"createdAt": -1 //sorting option
}
},
{limit:30} //sort here makes Meteor complain
);
Make sure that the index that you are specifying in your hint actually exists in your db or else mongo will complain about receiving a bad hint.
From a quick glance at the meteor-mongo warpper code, I don't see it.
However, the entire node.js driver is available to meteor (see a similar problem with findAndModify https://github.com/meteor/meteor/issues/1070).
And, hint is definitely available in the node.js driver, so perhaps building your own wrapper would be the solution? I haven't had to cross this bridge yet, so I can't offer a more explicit solution, but this may be a good starting point (and a great idea for a package!).
I am learning how to make firefox extensions and have gotten totally confused... so I thought I would start from the basics again.
Can you make me (or walk me through creating) a simple skeleton extension that saves "ryan" into sqlite storage, so that it is available even on the browser restart?
From there I think I can start modifying it to run all the different code that exists only in my head... and to answer my own questions :))
Thanks!
Ryan
This is even simpler if you use the Addon SDK.
var storage = require("simple-storage").storage;
if (storage.name) {
console.log (storage.name);
}
else {
console.log ("Storing!");
storage.name = "ryan";
}
This will output "Storing!" the first time it's run, and "ryan" subsequent times.