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

How to replace .html with forward slash in BrowserSync?
Error during instillation of browser sync
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)

Categories

HOME
django
delphi-7
fuelux
c99
nvd3.js
rdbms
ns-3
static
sitecore
sublimetext
replace
tivoli
carousel
android-json
special-characters
project
g++
google-schemas
commonjs
enthought
redis-sentinel
x-cart
comsol
libusb
null-pointer
fileserver
sigma.js
breadth-first-search
pagespeed
beta
draft-js-plugins
maze
spotipy
ceylon
iis-express
gp
magento-1.8
autodesk-designautomation
glib
sammy.js
xajax
parse-tree
filesystemwatcher
password-protection
ods
metawidget
trigonometry
bindingnavigator
smoothstate.js
wc
vaadin-charts
pom.xml
httrack
jboss-4.2.x
ntvs
serde
facebook-pixel
magic-draw
git-flow
jtree
taocp
visual-studio-2008-sp1
cubism.js
async.js
drawstring
observablecollection
appscale
cfchart
toast
contentcontrol
opl
java-money
fuelcms
sapscript
canalyzer
ember-cli-rails
viola-jones
dulwich
ocra
google-refine
fail2ban
entity-framework-4.3
osc
dot.js
bcache
cosine-similarity
filesplitting
big-ip
grails-domain-class
matrix-inverse
vsx
menubar
syndicationfeed
gtm-oauth2
away3d
script#
workitem
flex++
font-awesome-4.0.0
windows-98
fb.ui
bjyauthorize
resource-management
robotlegs
curb
mkv
vfs
faye
boost-signals
thttpd
jdb
listactivity
inline-formset
django-paypal
cloudfiles
timertask
drupal-fivestar
isapi-extension
spread
wcf-instancing
xpsdocument
dsoframer
mathematical-typesetting
netbeans6.1

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