Question

我是一名自动化测试员。我全局安装了浏览器同步来测试我们的网站。我尝试使用下面的代码（在index.html文件中）进行试用。

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

我添加了一个iframe来打开我要打开的网址，并将其大小调整为默认的窗口大小。上面的CSS代码调用如下：

        h1
        {
            background: red;
        }

gulf.js文件代码如下：

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);
});

它只是将背景颜色设为红色。

我正在为我打开所有浏览器和配置的Google页面。当我尝试垂直滚动时，在所有打开的浏览器窗口上都执行了相同的操作。

但是，当我尝试在Google搜索框中插入任何文字或点击Google主页上的任何链接时，它都没有在其他打开的浏览器窗口上同步/执行这些操作，甚至不是水平滚动。

我是浏览器同步的新手。我也尝试了一些gulp.js文件来解决上述问题。但是没有成功，因为在运行它时给了我一个问题，比如无法找到浏览器同步功能，而package.json文件缺少这样的东西。

Answer 1

访问以下链接 - 文档下方的https://www.browsersync.io/docs/gulp并将以下代码复制到src文件夹外的 gulpfile.js 文件中

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

创建 package.json 文件并检查它是否包含此代码： -

"devDependencies": {
    "browser-sync": "^2.15.0", //versions of the package
    "gulp": "^3.9.1"
  },
  "dependencies": {
    "gulp-sass": "^2.3.2"
  }

Answer 2

如果您缺少package.json，则需要在项目的根目录中使用“npm init”。从那里，如果你已经全局安装gulp（'npm install -g gulp'，如果你没有）你将要使用'npm install gulp browser-sync --save-dev'这个命令将下载所需的gulp和浏览器同步依赖项。 '--save-dev'部分将它们添加到你的package.json。

另外，我注意到你说这是在你的'gulf.js'文件必须命名为'gulpfile.js'，除非你专门更改gulp正在寻找的文件。这是我第一次回答这个问题，所以我希望它有所帮助！

如何使用Browsersync同步在网页上执行的操作？

2 个答案: