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.

回答1:

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"
  }

回答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!

来源：https://stackoverflow.com/questions/39920069/how-to-sync-the-actions-performed-on-webpage-using-browsersync

标签

browser-sync