How to avoid GULP opening a new tab? - javascript

That's my question, every time I go to the console and try to restart the server by doing gulp, a new tab is open in the browser, so I have to close the one I have open and start working on the new one.
And another question regarding the same:
sometimes there is an error on the code styling and the tab is open anyways once you do gulp, but you can not start working on it until you fix the error on the code style, then you go and do gulp and the new tab comes up.
here is my gulpfile.js
var gulp = require('gulp');
var paths = {
sass: ['scss/**/*.scss'],
js: ['www/js/*.js', 'www/js/**/*.js', '!www/js/lib.min.js', '!www/js/code.min.js']
};
// Dev task
gulp.task('dev', ['sass', 'lint', 'compress-lib', 'compress-js', 'run-ionic'], function() { });
// Build task
gulp.task('default', ['dev', 'lint', 'sass', 'compress-lib', 'compress-js', 'watch']);
//Ionic Serve Task
gulp.task('run-ionic',shell.task([
'ionic serve'
]));
gulp.task('compress-lib', function() {
gulp.src([
'./www/lib/ionic/js/ionic.bundle.min.js'
])
.pipe(concat('lib.min.js'))
.pipe(gulp.dest('./www/js'))
.pipe(livereload());
});
gulp.task('compress-js', function() {
gulp.src([
'./www/js/app.js'
])
.pipe(ngAnnotate())
.pipe(concat('code.min.js'))
.pipe(gulp.dest('./www/js'))
.pipe(livereload());
});
// JSHint task
gulp.task('lint', function() {
gulp.src(paths.js)
.pipe(jscs())
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(livereload());
});
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass({onError: function(e) { console.log(e); } }))
.pipe(autoprefixer('last 2 versions', 'Chrome', 'ios_saf','Android'))
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done)
.pipe(livereload());
});
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.js, ['lint', 'compress-lib', 'compress-js']);
livereload.listen(9000);
});
gulp.task('install', ['git-check'], function() {
return bower.commands.install()
.on('log', function(data) {
gutil.log('bower', gutil.colors.cyan(data.id), data.message);
});
});

Live Reload App During Development (beta)
The run or emulate command will deploy the app to the specified platform devices/emulators. You can also run live reload on the specified platform device by adding the --livereload option. The live reload functionality is similar to ionic serve, but instead of developing and debugging an app using a standard browser, the compiled hybrid app itself is watching for any changes to its files and reloading the app when needed. This reduces the requirement to constantly rebuild the app for small changes. However, any changes to plugins will still require a full rebuild. For live reload to work, the dev machine and device must be on the same local network, and the device must support web sockets.
With live reload enabled, an app's console logs can also be printed to the terminal/command prompt by including the --consolelogs or -c option. Additionally, the development server's request logs can be printed out using --serverlogs or -s options.
Command-line flags/options for run and emulate:
[--livereload|-l] ....... Live Reload app dev files from the device (beta)
[--consolelogs|-c] ...... Print app console logs to Ionic CLI (live reload req.)
[--serverlogs|-s] ....... Print dev server logs to Ionic CLI (live reload req.)
[--port|-p] ............. Dev server HTTP port (8100 default, live reload req.)
[--livereload-port|-i] .. Live Reload port (35729 default, live reload req.)
[--debug|--release]
While the server is running for live reload, you can use the following commands within the CLI:
restart or r to restart the client app from the root
goto or g and a url to have the app navigate to the given url
consolelogs or c to enable/disable console log output
serverlogs or s to enable/disable server log output
quit or q to shutdown the server and exit

if using browsersync
// Stop the browser from automatically opening
open: false
https://www.browsersync.io/docs/options
browserSync.init({
proxy: 'localhost:8000',
open: false,
browser: "google chrome",
files: [
'./**/*.php'
]
});

Related

Browser-sync - proxy a domain gets HTTP error 403 - you don't have authorization to view this page

I run a gulp task using NodeJS module browser-sync as below.
=== File gulpfile.js ===
let browserSync = require('browser-sync').create();
gulp.task('browser-sync', function(){
browserSync.init( {
open: true,
injectChanges: true,
proxy: 'https://generalgulp.devsunset',
host: '192.168.1.76',
serveStatic: ['.'],
https: {
key: 'C:\\WebProjects\\GeneralGulp\\resources\\certificates\\server-generalgulp.key',
cert: 'C:\\WebProjects\\GeneralGulp\\resources\\certificates\\server-generalgulp.crt'
}
});
});
=== ===
My local project information is as below (I use latest up to current post date):
Node version: 17.1.0
NPM versions: 8.1.3
gulp: 4.0.2
NPM module browser-sync: 2.27.7
I run the browser-sync task. The output looks good.
==>
Using gulpfile C:\WebProjects\GeneralGulp\gulpfile.js
[Browsersync] Starting 'browser-sync'...
[Browsersync] Proxying: https://generalgulp.devsunset
Access URLs:
Local: https://localhost:3000
External: https://192.168.1.76:3000
UI: http://localhost:3001
UI External: http://localhost:3001
==>
I already add the SSL certificate for this domain to trusted root. I also have DNS records pointing from this domain ( https://generalgulp.devsunset ) - IP addresses ( 127.0.0.1 & 192.168.1.76)
I can access the site from both local & external address.
However, when I try to access the local resources using proxied domain ( https://generalgulp.devsunset
) , it gets an HTTP 403 :
Access to <my_custom_domain> was denied. You are not authorize to
view this page
I suppose when running my gulp "browser-sync" task, it will translate the custom domain to the https://localhost:3000 or https://192.168.1.76:3000
I have followed exactly the documents of https://browsersync.io/docs . I have also made an attempt with all solutions I could find. Those solutions led me to the gulp task that I wrote at the beginning.
I would appreciate if you can suggest me which things I should do further to troubleshoot why does my browser-sync cannot “proxy” my domain? Is there any parameter missing in my Gulp task?
Thanks !
I have modified the "proxy" parameter as below and it works when i access the proxied domain with given port:
(for my case is http(s)://generalgulp.devsunset:3000 )
`gulp.task('browser-sync', function(){
browserSync.init( {
open: true,
injectChanges: true,
proxy: 'generalgulp.devsunset',
host: '192.168.1.76',
serveStatic: ['.'],
https: {
key: 'C:\\WebProjects\\GeneralGulp\\resources\\certificates\\server-generalgulp.key',
cert: 'C:\\WebProjects\\GeneralGulp\\resources\\certificates\\server-generalgulp.crt'
}
});
});
`
This is a temporary acceptable solution regarding to the current question scope.
However, What i expect is the browser-sync will auto-forward traffic from custom domain ( http(s)://generalgulp.devsunset ) to : ( http://192.168.1.76:3000 ).
Does browser-sync allow users to do it ?

Running protractor test in chrome driver doest not opens up any website

System Details
Mac OS, Chromedriver v=83.0.4103.39 , Protractor=7.0
My test is failing all the time when chromedriver opens any website it says your connection is not private please let me know how to fix this issue
chromedriver page
My spec.js looks like below
describe('angularjs homepage todo list', function() {
it('should add a todo', function() {
browser.get('https://angularjs.org');
});
});
config.js looks like below
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['spec.js'],
};
this is how my proxies look like
proxy settings in mac
Changes my config.js to
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['spec1.js'],
//acceptInsecureCerts : true
'args': ['--disable-web-security', '--user-data-dir=~/.e2e-chrome-profile', '--ignore-certificate-errors']
};
Still any URL like facebook.com or google.com I am getting err_invalid_cert err

Safari WebDriver setTimeout using protractor exiting

I have done a lot of unit tests using Karma, but my office would like to have some integration tests, especially testing cross browser capabilities. For this, it seemed Protractor was my best option, and I have started get get some basic dashboard tests going, but am stuck with safari.
My Config:
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['scenarios/*Scenario.js'],
framework: 'jasmine',
baseUrl: 'https://www-dev.remeeting.com/',
multiCapabilities: [{
browserName: 'firefox'
}, {
browserName: 'chrome'
}, {
browserName: 'safari'
}],
onPrepare: function() {
browser.driver.get('https://www-dev.remeeting.com/');
browser.driver.findElement(by.id('email')).sendKeys('adam+test#mod9.com');
browser.driver.findElement(by.id('password')).sendKeys('abc123');
browser.driver.findElement(by.id('submit_btn')).click();
// Login takes some time, so wait until it's done.
// For the test app's login, we know it's done when it redirects to
// app/#/d.
return browser.driver.wait(function() {
return browser.driver.getCurrentUrl().then(function(url) {
return /app\/#\/d/.test(url);
});
}, 10000);
}
};
My only spec
describe('Dashboard', function() {
it('should login to the dashboard', function() {
expect(element(by.css('.dashboard')).getText()).toMatch(/Upload Meeting/);
expect(element(by.id('refreshButton')));
expect(element(by.css('.dashboard div.btn-group')))
});
});
And the error
[safari #21] PID: 79079
[safari #21] Specs: /Users/adam/git/mrp- www/e2e/scenarios/dashboardScenario.js
[safari #21]
[safari #21] Using the selenium server at http://localhost:4444/wd/hub
[safari #21] ERROR - Unable to start a WebDriver session.
[safari #21] Unknown command: setTimeout (WARNING: The server did not provide any stacktrace information)
...
[safari #21] Driver info: org.openqa.selenium.safari.SafariDriver
[safari #21] Capabilities [{browserName=safari, takesScreenshot=true, javascriptEnabled=true, version=9.1, cssSelectorsEnabled=true, platform=MAC, secureSsl=true}]
[safari #21] Session ID: null
[launcher] Runner process exited unexpectedly with error code: 1
[launcher] 2 instance(s) of WebDriver still running
Anybody know how to configure protractor for safari?
Here is what I did to successfully set up Safari + Protractor:
made sure I have the latest Safari (9.1 at the moment)
downloaded the latest Safari driver from this page, opened the Safari extensions preferences and dragged and dropped the SafariDriver.safariextz file into the extension list:
upgraded protractor to the latest version (3.2.2 at the moment)
Note that, as an alternative, you can always run Safari remotely on BrowserStack or SauceLabs.
See also the list of Safari+Protractor issues.

How can I setup a testing environment for testing with selenium and phantomjs?

I am trying to setup environment for headless testing using Selenium and PhantomJS.
Setting UP phantomjs:
I have made a folder c:/phantomjs and put all the phantomjs script files there (after downloading).
Then I created a folder C:\xampp\htdocs\testPhantomJS
Now I installed nodeJS in my system.
Then I traversed to the C:\xampp\htdocs\testPhantomJS in the command prompt and installed phantomJS like this:
C:\xampp\htdocs\testPhantomJS>npm install -g phantomjs
The image states a different location. Thats because it was taken from my colleague's computer. We both are working on same installation, and he sent me the image for reference. That's why its different with my folder location, but the location I stated, it is the one I worked on.
Now on typing phantomjs on command prompt, when we are typing
C:\xampp\htdocs\testPhantomJS>phantomjs
phantom>
Setting Up Selenium-Webdriver
I traversed to C:\xampp\htdocs\testPhantomJS in the command prompt and installed selenium webdriver like this:
C:\xampp\htdocs\testPhantomJS>npm install selenium-webdriver
After installation, the folder structure is like this:
Now I have a test-script test.js which is like this:
describe('Test example.com', function(){
before(function(done) {
client.init().url('http://google.com', done);
});
describe('Check homepage', function(){
it('should see the correct title', function(done) {
client.getTitle(function(err, title){
expect(title).to.have.string('Example Domain');
done();
});
});
it('should see the body', function(done) {
client.getText('p', function(err, p){
expect(p).to.have.string(
'for illustrative examples in documents.'
);
done();
})
});
});
after(function(done) {
client.end();
done();
});
});
The problem is, where should I put the above script, and how shall I run it?
I just don't need to run using the phantomjs only, I need to test with both phantomjs and selenium.
This solution is coming from this pretty neat tutorial on how to setup testing with selenium and phantomjs: http://code.tutsplus.com/tutorials/headless-functional-testing-with-selenium-and-phantomjs--net-30545
Here is some of the tutorial below:
Combining Everything
Now that we have all the pieces, we have to put everything together.
Remember: before running any tests, you have to run Selenium Server:
1
java -jar selenium-server-standalone-2.28.0.jar
Selenium will run PhantomJS internally; you don't have to worry about that.
Now, we need to connect to Selenium from our JavaScript. Here's a sample snippet, which will initiate a connection to Selenium and have a ready object to control our Selenium instance:
// Use webdriverjs to create a Selenium Client
var client = require('webdriverjs').remote({
desiredCapabilities: {
// You may choose other browsers
// http://code.google.com/p/selenium/wiki/DesiredCapabilities
browserName: 'phantomjs'
},
// webdriverjs has a lot of output which is generally useless
// However, if anything goes wrong, remove this to see more details
logLevel: 'silent'
});
client.init();
Now, we can describe our tests and use the client variable to control the browser.
A full reference for the webdriverjs API is available in the documentation, but here's a short example:
client.url('http://example.com/')
client.getTitle(function(title){
console.log('Title is', title);
});
client.setValue('#field', 'value');
client.submitForm();
client.end();
Let's use the Mocha and Chai syntax to describe a test; we'll test some properties of the example.com web page:
describe('Test example.com', function(){
before(function(done) {
client.init().url('http://example.com', done);
});
describe('Check homepage', function(){
it('should see the correct title', function(done) {
client.getTitle(function(title){
expect(title).to.have.string('Example Domain');
done();
});
});
it('should see the body', function(done) {
client.getText('p', function(p){
expect(title).to.have.string(
'for illustrative examples in documents.'
);
done();
})
});
});
after(function(done) {
client.end();
done();
});
});
You might want to share one client initialization over many test files. Create a small Node module to initialize and import it into every test file:
client.js:
exports.client = require('webdriverjs').remote({
// Settings
};
test.js:
var client = require('./client').client;
var expect = require('chai').expect;
// Perform tests
EDIT based on the question in the comments:
Here is how to install the selenium server, and yes you need to do it.
Selenium
Download Selenium Server. It is distributed as a single jar file, which you run simply:
java -jar selenium-server-standalone-2.28.0.jar
As soon as you execute this command, it boots up a server to which your testing code will connect later on. Please note that you will need to run Selenium Server every time that you run your tests.

Grunt start Node Server and then open browser

I have grunt task that starts the server:
module.exports = function(grunt){
grunt.registerMultiTask('connect', 'Run a simple Node Server', function(){
var options = this.options();
// Tell Grunt this task is asynchronous.
var done = this.async();
var server = connect();
server.use(function(request, response, nxt){
...
});
server.listen(port);
});
};
Now I want to use grunt to start this node server first and then open the browser using grunt-open plugin.
grunt.task.run(['startServer', 'open']);
But startServer task in blocking the open task as the server keeps on listening. What should I do to keep this node server running and open the browser once the server starts?
I had the same problem as yours and I worked in Windows environment. My solution was to put the web server codes in a file for example myServer.js, and use cmd: "start node \"path\to\myServer.js" within the grunt-exec settings.
Example:
Let's assume my server file is located on the following path: D:\SourceCodes\WebServer\myServer.js
ip address and port of my server is 192.168.1.1:8080,
and my webpage is index.html
Then the Gruntfile.js would be:
module.exports = function (grunt) {
grunt.initConfig({
exec: {
run_server:{
cwd: "D:/SourceCodes/WebServer/",
cmd: "start node \"D:/SourceCodes/WebServer/myServer.js\""
},
open_web:{
cmd: "start chrome http://192.168.1.1:8080/index.html"
}
});
grunt.loadNpmTasks('grunt-exec');
grunt.registerTask('default', ['exec']);
}
Two things:
your 'connect' task currently blocks while waiting, you have to tell it to let the grunt process run asynchronously: call done() at the end
...
server.listen(port);
done();
});
now your build will end at the end of your task list, and take down your server with it. So you have to add a task to keep it alive. I suggest using grunt-contrib-watch, but you may choose any one you like, as long as it's a blocking task:
grunt.task.run(['startServer', 'open', 'watch]);
By the way, why are you calling grunt.task.run instead of defining your own task sequence grunt.registerTask('default', ['startServer', 'open', 'watch]); ?

Categories

Resources