We Keep Coding

Dismiss firefox update popup with WebdriverIO

I want to dismiss this popup when I'm running my tests with webdriverIO but I'm not able to do it.
I'm using chimp to run my tests
I tried with browser.alertdismiss() but it didn't work. Also, I tried using this NPM package and adding this configuration but seems that firefox it's not taking that profile
My configuration file
// wdio.conf.js
const config = {
// ...
services: ['firefox-profile'],
firefoxProfile: {
"app.update.enabled": true,
"app.update.auto": true,
"app.update.silent": true,
"privacy.popups.firstTime": true,
"update.showSlidingNotification": false,
"update_notifications.enabled": false ,
},
// ...
};
module.export = config;

Rewriting Webpack Proxy URLs

I'm using Webpack Dev Server to proxy my files from an external url, that's because I'm using it to develop locally and proxying the PHP/Twig files from the server, so that way I don't need to set up all the back-end locally.
But the problem is that I need to rewrite the assets urls to pull these files from my local machine, not from the proxy. Right now, when I open my localhost, all the assets are being loaded from the server. i.e: http://mycoolwebsite.com/core/somefolder/assets/styles.css
And I need to replace that to pull from my localhost, like this:
/assets/styles.css
This is what I have now:
devServer: {
compress: true,
port: 9000,
proxy: {
'*': {
target: 'http://mycoolwebsite.com',
changeOrigin: true,
secure: false
}
}
Any clue?
Thanks!

you want all request that go to your server "http://mycoolwebsite.com/**"
to go to your local machine: "http://localhost:9000/" (assuming its running on port 9000)
so try this:
proxy: {
'/assets/**': {
target: 'http://localhost:9000',
secure: false,
pathRewrite: function(req, path) {
//use the pathRewrite to modify your path if needed
return path;
}
}
now it shouldn't make any difference what server you are actually calling. every request that includes '/assets/' should go to your localhost. (I can not test it atm)

Using Gulp + BrowserSync + Connect PHP for Multiple Projects

I've put together a boilerplate gulp setup for myself when setting up a new webapp project and I'm having some trouble with using BrowserSync, and Connect-PHP in tandem.
Here's are my tasks for spinning up the server and starting BS:
gulp.task('php', function() {
php.server({base: 'app', port: 8030, keepalive: true});
})
gulp.task('browserSync',['php'], function(){
browserSync.init({
proxy: '127.0.0.1:8030',
port: 8080,
open: true,
notify: false
});
})
The problem is that every time I set up a new project, I have to change the port for the php server and proxy url to a new, previously unused one.
Is there a way I can avoid having to choose a new port number each time?
For further reference, it appears this question was asked before but not answered here: Can't use gulp (with gulp-connect-php and gulp-browser-sync) with multiple projects

gulp-angular-templatecache wrong module name

I'm having serious problems getting gulp-angular-templatecache to work nicely within my app. I'm using the HotTowel yeomen generator and I modified it a little bit, but I can't seem to get my template cache to use a different module name. Here's the relevant gulpfile code:
gulp.task('templatecache', ['clean-code'], function() {
log('Creating an AngularJS $templateCache');
return gulp
.src(config.htmltemplates)
.pipe($.if(args.verbose, $.bytediff.start()))
.pipe($.minifyHtml({empty: true}))
.pipe($.if(args.verbose, $.bytediff.stop(bytediffFormatter)))
.pipe($.angularTemplatecache(
'templates.js',
{
module: 'app.templates',
standalone: true,
root: 'app/',
moduleSystem: 'IIFE'
}
))
.pipe(gulp.dest(config.temp));
});
The original HotTowel gulpfile had {module: 'app.core', standalone: false, root: 'app/'} as the options. Every time I run the build process, my stupid templates.js file looks like this:
angular.module("app.core").run(["$templateCache"....
I've tried so many things to change it, but it never goes to app.templates. Any ideas?

Webpack dev server hot mode not working

Heres my config:
devServer: {
contentBase: '/web/dist/',
hot: true,
stats: {colors: true},
inline: true
}
And here's the gulp task im running:
gulp.task('build', ['clean', 'styles', 'bower', 'media', 'data', 'homepage'], function(done) {
es6promise.polyfill();
console.log('STARTING DEV SERVER...');
server = new WebpackDevServer(webpack(webpackDevConfig), webpackDevConfig.devServer);
server.listen(8080, '0.0.0.0', function (err, stats) {
if (err) {
throw new gutil.PluginError("webpack-dev-server", err);
}
console.log('DEV SERVER STARTED');
done();
});
});
Everything works as expected except the hot loading (no refresh or change when I make changes to files). What am I doing wrong here?

You need to add <script src="http://localhost:8080/webpack-dev-server.js"></script> to your index.html It is not added when you use the API
"Notice that webpack configuration is not passed to WebpackDevServer API, thus devServer option in webpack configuration is not used in this case. Also, there is no inline mode for WebpackDevServer API. <script src="http://localhost:8080/webpack-dev-server.js"></script> should be inserted to HTML page manually."
(http://webpack.github.io/docs/webpack-dev-server.html)
maybe you also need to add 'webpack/hot/dev-server' as an entrypoint to your webpack config

be sure to set
webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
in the webpackConfig as well

If you are using redux can try this.
For some random reason redux-devtools was not allowing hot reload for me. Try removing it from root component and redux compose config.
Note: Use redux devtool browser extension with this config in your store configuration: window.devToolsExtension ? window.devToolsExtension() : f => f
Also, must read: https://medium.com/#rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96#.ejpsmve8f
Or try hot reload 3:
example: https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915