browser-sync


How to sync the actions performed on webpage using Browsersync?


I am an automation tester. I installed browser-sync globally to test the website we have. I tried with below code (in index.html file) for trial purpose.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<iframe src="https://www.google.co.in/" onload="this.width=screen.width;this.height=screen.height"></iframe>
</body>
</html>
I had added an iframe to open the URL I want to open and resize it to default windows size. And CSS code call above is as below:
h1
{
background: red;
}
gulf.js file code is as below:
var gulp = require('gulp');
var bs = require('browser-sync').create();
// create a browser sync instance.
gulp.task('serve', function()
{
bs.init ({
server: {
baseDir: "Desktop/BrowserSync/Demo", index: "index.html"
}
});
gulp.watch("*.html").on('change', bs.reload);
});
It is just giving the background color as red.
It is opening the Google page for me on all browsers and configurations I have. When I tried for scroll movement vertically, the same has been performed on all the opened browser window.
However, when I tried to insert any text in Google search box or click or any link on Google home page, it is not syncing/executing these actions on other opened browser windows, not even horizontal scroll.
I am totally new to browser-sync. I also tried with some gulp.js file to resolve above issue. However no success, as while running it has given me an issue like cannot find browser-sync function and package.json file is missing something like this.
Visit this link - https://www.browsersync.io/docs/gulp below the docs and copy the code below in gulpfile.js file outside your src folder
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
// Static server
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
// or...
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "yourlocal.dev"
});
});
create package.json file and check whether it has this code:-
"devDependencies": {
"browser-sync": "^2.15.0", //versions of the package
"gulp": "^3.9.1"
},
"dependencies": {
"gulp-sass": "^2.3.2"
}
If you are missing your package.json, you'll need to use 'npm init' in the root of your project. From there, if you have gulp installed globally ('npm install -g gulp' if you don't) you'll want to use 'npm install gulp browser-sync --save-dev' This command will download the required gulp and browser-sync dependencies. The '--save-dev' part adds them to your package.json.
Also, I noticed you said this is in your 'gulf.js' The file must be named 'gulpfile.js' unless you specifically change the file gulp is looking for. This is my first time answering something, so I hope it helps!

Related Links

When using browser-sync,why is the browser saying cannot get, while everything seems fine
How to sync the actions performed on webpage using Browsersync?
lite-server, BrowserSync: setting other URL path than /
Gulp and Browsersync injecting CSS but causing a full reload
Browser-sync - serve “node_modules” out of “src” directory
[browser-sync]browser-sync proxy can't connect to Rails Application
Browserstack not serving index.html by default
whatever i do i can't access the external URL for the site or UI
How do I kill browserSync before creating it?
Unable to install browser-sync on windows 7
browser-sync proxy fails to connect
What's the equivalent bs-config.js (Browsersync) of this command?
How to quit the browser-sync server, or how to know the running server pid
browsersync not working (note: not using gulp)
Using browsersync with gulp/nodemon
BrowserSync Not Reloading Changes

Categories

HOME
adal
eslint
nvd3.js
dns
datastore
angular-formly
pascal
requirements
sublimetext
bitbucket-api
azure-container-service
google-chrome-app
windows-ce
x-cart
endpoint
dynatrace
do-while
gruntfile
azure-powershell
mvc-mini-profiler
dimensional-modeling
database-connection
jquery-ias
dpdk
pimcore
php-mysqlidb
mongoid6
progress-bar
wcag
errbot
failover
alm
gitlab-api
zend-debugger
paragraph
mustache
weather
record
hibernate-validator
joomla2.5
nested-lists
video-capture
swagger-php
alphabetical
azure-arm
naming
contract
signal-strength
flask-login
oim
rfc3339
opencmis
clarifai
fclose
carrot2
branch-prediction
polyline
cronexpression
actor-platform
preprocessor
async.js
ng-grid
hadoop-partitioning
terracotta
ess
include-guards
zscript
skspritenode
airbrake
canvg
typeconverter
j-security-check
ssis-data-flow
easyrtc
mdichild
jqmodal
verold
personalization
buffering
authlogic
koala
mysql-error-1044
css-reset
mysql-error-2013
bjyauthorize
sqlclr
mkv
qtconcurrent
uimanageddocument
jquery-tools
htdocs
xcelsius
strsep
django-paypal
twitterizer
rowlex
eclipse-marketplace
folding
scrollbars
wcf-instancing
dsl-tools
linfu-dynamicproxy
dsoframer
soappy
pnrp

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App