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

Can we use browser sync on external url
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

Categories

HOME
beautifulsoup
pagination
pda
jmx
apache-spark-mllib
oracle-apex-5
grafana
seo
entity-framework-core
telegram-bot
pyqt4
interpolation
jquery-ui
azure-container-service
crystal-lang
arangodb
ibeacon-android
angular-dart
dynamic-sql
google-content-api
git-extensions
boost-icl
r-mice
imageresizer
perlbrew
surveymonkey
opentk
fat
fable-f#
intersystems-cache
rpgle
exchangewebservices
quantlib
eviews
livelink
zend-debugger
jmockit
turfjs
erb
mailkit
classcastexception
keras-layer
navigator
hivemq
sql-server-ce
flatmap
odroid
android-softkeyboard
portforwarding
escpos
preloader
ssrs-2014
angular-http
apache-directory
flask-login
vaadin-elements
textsum
wcftestclient
dbcontext
aquamacs
seq
lsyncd
gameplay-kit
cudd
avspeechsynthesizer
firebase-security
google-query-language
cortex-m
contentcontrol
libvlc
dllimport
jdk1.7
amiga
haskell-warp
jsvc
dnssec
fail2ban
primitive-types
rickshaw
appserver
entry-point
template-deduction
reflector
maven-scm
websphere-esb
drupal-nodes
high-resolution
visual-studio-express
c++builder-xe5
windows-phone-8-sdk
ebay-lms
composite-component
argouml
joomla3.1
jquery-blockui
mapping-by-code
flex-mobile
user-tracking
entitydatasource
drawtobitmap
http-daemon
vs-android
object-database
eclipse-marketplace
tabpanel

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