2016

Manual - Browser Sync

MANUAL DE USUARIO DEL PROYECTO

Proyecto Manual Browser Sync

Cdigo del proyecto

HISTORIAL DE REVISIONES

Fecha Versin Descripcin Autor

01-08-2016 V 1.0 Elaboracin del Manual del Browser Sync Luzmila Roncal
26-01-2017 V 2.0 Actualizacin del manual del Browser Sync Marcos Capcha

Pgina 1 de 8 BINARIX S.A.C.

Diez Canseco, 219. Miraflores
Lima, Per
T: +51 1 6168500
www.phantasia.pe
 2016
Tabla de contenido
1. Identificacin de la funcionalidad ................................................................................................. 3
2. Quines deben usar esta gua? ................................................................................................. 3
3. Supuestos y asunciones .............................................................................................................. 3
4. Detalle de actividades a seguir .................................................................................................... 3
Instalacin del Browser Sync ....................................................................................................... 3
Uso del Browser Sync ................................................................................................................... 5
Funcionalidad................................................................................................................................. 7
5. Observaciones adicionales .......................................................................................................... 7
6. Control de aprobaciones a esta gua ........................................................................................... 8

Pgina 2 de 8 BINARIX S.A.C.

Diez Canseco, 219. Miraflores
Lima, Per
T: +51 1 6168500
www.phantasia.pe
 2016
1. Identificacin de la funcionalidad

Browsersync es un mdulo para Node.js, multiplataforma para

Funcionalidad
aplicaciones de red rpidas.
El presente documento tiene como objetivo describir de forma
Objetivo de la gua clara y sencilla el proceso para utilizar la herramienta
Browsersync.

2. Quines deben usar esta gua?

Este manual est orientado al equipo QA involucrado en la revisin de pruebas funcionales.

3. Supuestos y asunciones

- Para utilizar la herramienta se debe de descargar los archivos he instalar Node.js en su

equipo.
- Esta herramienta permite sincronizar mltiples navegadores en todos los dispositivos
conectados a travs de un servidor, permitiendo as manejar las funciones del aplicativo
desde un solo dispositivo.

4. Detalle de actividades a seguir

Instalacin del Browser Sync

4.1 Descarga de Archivos

Iniciamos la descarga de los archivos del programa de la siguiente ruta

https://github.com/Browsersync/browser-sync.

Nota: Descargar los archivos en .ZIP y extraerlo en el disco C.

Pgina 3 de 8 BINARIX S.A.C.

Diez Canseco, 219. Miraflores
Lima, Per
T: +51 1 6168500
www.phantasia.pe
 2016

4.2 Luego instalamos el gestor de paquetes Node.js, este programa se instalar en Browser
Sync desde un repositorio y para la instalacin abrimos la consola CMD y ejecutamos el
siguiente comando:

npm install -g browser-sync

4.3 Despus dirigirse a la ruta que se indica en la consola:

4.4 En la ruta, copiar la carpeta npm y pegarla directo en el disco C.

Pgina 4 de 8 BINARIX S.A.C.

Diez Canseco, 219. Miraflores
Lima, Per
T: +51 1 6168500
www.phantasia.pe
 2016

Uso del Browser Sync

4.5 Para usar el Browser Sync abrimos la consola CMD y nos dirigimos a la carpeta npm del
disco C y luego ejecutamos el siguiente comando:

browser-sync start --proxy "myproject.dev"

Nota: En el comando reemplazar myproject.dev por la ruta del site del proyecto. Para el
ejemplo es http://centrum-alpha-staging.phantasia.pe/.

Pgina 5 de 8 BINARIX S.A.C.

Diez Canseco, 219. Miraflores
Lima, Per
T: +51 1 6168500
www.phantasia.pe
 2016
4.6 Luego de ejecutar el comando se cargara la pgina en el browser definido por el usuario en la
ruta Local que se menciona en la consola , para este ejemplo es http://localhost:3000/

Pgina 6 de 8 BINARIX S.A.C.

Diez Canseco, 219. Miraflores
Lima, Per
T: +51 1 6168500
www.phantasia.pe
 2016
4.7 Despus para tomar control en otras computadoras o equipos ingresar en el browser la ruta
External que se menciona en tu consola, para este ejemplo es http://10.12.101.13:3000/

Funcionalidad

La herramienta permite realizar todo tipo de pruebas funcionales realizadas en el equipo local
permitiendo sincronizar todos los equipos remotos para realizar una infinidad de pruebas como
loguearse a una pgina web, realizar registros, validaciones en todos los campos de un formulario
web, navegar de una pgina a otra, sincroniza el scroll y los clicks en todos los navegadores
conectados.

Tambin tiene una interfaz grfica que permite configurar la herramienta, consultar el historial,
sincronizar todos los dispositivos en la misma pgina de la aplicacin, herramientas para hacer
debug, y simular una conexin lenta para comprobar cmo se comporta la aplicacin en conexiones
lentas.

5. Observaciones adicionales

Puerto 3001

Al copiar la siguiente ruta http://localhost:3001/ en el navegador se carga la siguiente pgina:

Pgina 7 de 8 BINARIX S.A.C.

Diez Canseco, 219. Miraflores
Lima, Per
T: +51 1 6168500
www.phantasia.pe
 2016

La pgina contiene las siguientes opciones:

Overview: Muestra la ruta local, remota, las funciones de proxy y las conexiones actuales.
Sync options: Muestra las opciones de sincronizacin, adems permite desactivar o activar los
clics, entre otros.
History: Muestra el historial de navegacin, permitiendo obtener una nueva pestaa, limpiar
eliminar y sincronizar todo.
Plugins: Permite instalar o crear plug-ins.
Remote Debug: Permite realizar el debug remoto, aadir css, entre otros.
Network Throttle: Permite configurar la velocidad, puerto y crear un servidor asociado. Adems de
listar los servidores.
Help/ About: Muestra las opciones de ayuda.

6. Control de aprobaciones a esta gua

Fecha Nombre Rol Referencia a la constancia de aprobacin

Pgina 8 de 8 BINARIX S.A.C.

Diez Canseco, 219. Miraflores
Lima, Per
T: +51 1 6168500
www.phantasia.pe