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

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)
Using browsersync with gulp/nodemon

Categories

HOME
asp.net-web-api
grok
api
merge
c99
wakanda
rdbms
jmx
3d
sh
composite-primary-key
visual-studio-emulator
activecollab
emoji
libc
gkturnbasedmatch
bitnami
video-editing
google-container-registry
nim
oledb
kendo-mobile
blade
babel
exploit
comparator
strongname
opentk
oculus
angular-translate
subclass
user-defined-functions
aws-codecommit
openwhisk
baidu-map
mnist
alphabetical
loading
c9.io
unordered-map
azure-arm
glm-math
print-css
oim
magento-2.0.7
hammer.js
mschart
remedy
android-testing
arules
cudd
stax
google-cloud-console
burrows-wheeler-transform
mta
i386
mediametadataretriever
bizagi
aurora
redis-cluster
libav
grass
aspen
mobiledoc-kit
dynamics-nav-2016
rewrite
forwarding
xvim
iced-coffeescript
dulwich
haskell-warp
document-repository
genymotion-call
rmysql
mdichild
cfcache
sbcl
light
kaleidoscope
wp7test
tree-balancing
pyunit
boost-signals
lambdaj
oracle-enterprise-linux
ilasm
node-redis
workflow-services
entitydatasource
clrstoredprocedure
appledoc
svk
dot-emacs
wcf-instancing
interop-domino
unmanagedresources
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