Cree una aplicación Web3 de una sola página con Vue 3, Vite y Pinia

Introducción Creado en 2014, es, sin duda, uno de los marcos frontend líderes en este momento. Con una comunidad en crecimiento y un ecosistema en expansión, parece que seguirá así durante bastante tiempo. Trabajé con Vue 2 hace varios años para algunos proyectos y me pareció una experiencia encantadora. Vue.js En un intento por mantenerme al día con las tendencias en evolución, pensé que ahora es el momento de actualizar mi conjunto de herramientas a la última versión y también con herramientas más nuevas como y . Vite Pinia Esta guía cubrirá en detalle los pasos para crear una 'aplicación de una sola página de librería de ejemplo funcional' usando Vue 3 y ejecutándola usando Vite. También incluye detalles sobre cómo agregar, administración de estado mediante Pinia (el sucesor de ) y enrutamiento mediante . Vuex Vue Router Los conceptos básicos que se tratarán son: Crear una aplicación de una sola página usando Vue 3 Vite Administrar rutas con Vue Router Administrar el estado de la aplicación con Pinia Ejecución, creación e implementación de la aplicación con Vite Escribir y ejecutar pruebas de componentes de Vue Escribir y ejecutar pruebas integrales automatizadas con Nightwatch.js Esto puede parecer mucho, pero creo que es perfectamente posible repasarlo todo en menos de 20 minutos. Algunos de los temas enumerados anteriormente podrían expandirse en tutoriales completos propios, pero por ahora, solo cubriré lo que se necesita para tener todo en funcionamiento. Una última cosa que debe mencionarse es que el backend no está cubierto en este tutorial. No hay un componente del lado del servidor per se, aunque los datos se cargan mediante la API Fetch del navegador (el sucesor de XHR), por lo que se podría agregar fácilmente un componente de back-end. Para todas las cuentas y propósitos, la aplicación que construiremos aquí se puede implementar como un sitio web estático. Si está ansioso por comenzar a codificar y le gustaría comenzar de inmediato, puede poner en marcha el proyecto con: git clone https://github.com/beatfactor/middlemarch npm install npm run dev O bifurca el proyecto en Github en: https://github.com/beatfactor/middlemarch Paso 1: configuración de la aplicación con la herramienta Scaffolding create-vite Vamos a utilizar la herramienta de andamiaje oficial 'create-vite' para configurar la estructura del proyecto. Asegúrese de tener Node 12+ instalado con NPM 6+. También admiten Yarn y PNPM como administradores de paquetes, pero solo cubriremos NPM. La herramienta 'create-vite' también creará la carpeta del proyecto por ti, así que asegúrate de ingresar primero a la carpeta principal: cd ~/workspace Instale e inicialice el proyecto con: Vite npm init vite@latest Luego se le pedirá que ingrese el nombre del proyecto y seleccione la biblioteca que desea usar. De la lista, elija : vue ~/workspace % npm init vite@latest npx: installed 6 in 1.051s ✔ Project name: … vue-bookstore ? Select a framework: › - Use arrow-keys. Return to submit. vanilla ❯ vue react preact lit svelte Luego seleccione como la variante, ya que no usaremos TypeScript: vue ? Select a variant: › - Use arrow-keys. Return to submit. ❯ vue vue-ts Debería ver el siguiente resultado: npx: installed 6 in 1.051s ✔ Project name: … vue-bookstore ✔ Select a framework: › vue ✔ Select a variant: › vue Scaffolding project in /Users/andrei/workspace/vue-bookstore... Done. Now run: cd vue-bookstore npm install npm run dev Una vez que hayamos seguido las instrucciones anteriores, obtendremos el siguiente resultado de Vite indicándonos que la aplicación se está ejecutando: vite v2.7.7 dev server running at: > Local: http://localhost:3000/ > Network: use `--host` to expose ready in 611ms. Visitemos la URL localhost:3000. La página de bienvenida se ve así: Paso 2: enrutamiento con Vue Router y gestión de estado con Pinia Revisemos la estructura de directorios del proyecto creada por la herramienta : create-vite vue-bookstore/ ├── public/ | ├── favicon.ico ├── src/ | ├── assets/ | | └── logo.png | ├── components/ | | └── HelloWorld.vue | ├── App.vue | └── main.js ├─── package.json ├─── README.md └─── vite.config.js En esta sección de nuestra guía, agregaremos dos nuevas dependencias a nuestro proyecto: y . Sigamos adelante e instálelos desde NPM. Vue-router pinia Enrutador Vue Vue Router es el enrutador oficial de Vue.js. Necesitaremos instalar la versión 4 que es compatible con Vue 3: npm install vue-router@4 --save Pinia es uno de los proyectos más nuevos que emergen del ecosistema Vue y es la nueva herramienta oficial de administración de estado para las aplicaciones Vue.js. Su API es muy similar a Vuex (su predecesor) y está diseñada para ser más rápida y ligera. Pinia Puede instalar pinia desde NPM con: npm install pinia --save Configuración de enrutamiento Si no está familiarizado con la administración del estado o el enrutamiento en una aplicación de una sola página, no se preocupe; ambos conceptos son muy fáciles de entender y serán fáciles de comprender una vez que vea cómo funciona. Además, recuerde que solo estamos creando un tutorial aquí y el objetivo es tener todo listo y funcionando en 20 minutos y eso no requiere aprender todo lo que hay que saber sobre Vue.js. Ni siquiera requiere entender todo lo que haremos. ¿Qué es una solicitud de una sola página? Dado que aquí estamos creando una aplicación de una sola página, podría ser útil (aunque no esencial) considerar qué significa eso y por qué es una sola página. Una aplicación de una sola página, en pocas palabras, es una aplicación web que no vuelve a cargar la página cuando navega a otra de sus subpáginas. Sin embargo, la URL del navegador se modifica para que parezca que la página se ha vuelto a cargar, y eso se hace mediante la de HTML5. API de historial Trabajar con componentes Vue en Vite El scaffolding creado con la herramienta agrega un componente Vue muy básico, ubicado en . Luego se usa en el componente principal de la aplicación, ubicado en . create-vite src/components/HelloWorld.vue src/App.vue Hay otros dos archivos importantes a tener en cuenta: índice.html src/principal.js El archivo index.html es lo que ve el navegador cuando navega a la página de nuestra aplicación, y main.js es el punto de entrada para la aplicación Vue.js. Así es como se ven estos archivos: índice.html Vite App src/principal.js import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') Adición de rutas Ahora es el momento de crear las rutas principales de nuestra aplicación. En Vue, cada ruta debe corresponder a un componente. Para esta aplicación, consideraremos un componente por subpágina, así: de inicio - la página de inicio de nuestra librería Página : el carrito de compras y la página de salida Carrito : la página de inicio de sesión del usuario Iniciar sesión Dado que este es solo un ejemplo, se han omitido otras páginas, como el registro de usuario o la página de detalles del producto. Además, la página de inicio de sesión solo contiene un inicio de sesión simulado. Para HTML y CSS básicos, también he usado para elementos como menús desplegables y formularios de la interfaz de usuario, pero, por supuesto, puede usar cualquier biblioteca de interfaz de usuario que desee. Bootstrap 5 Pasaremos a crear componentes de página vacíos por ahora para que podamos configurar el enrutamiento. La nueva estructura de directorios src se verá así (después de eliminar el código repetitivo): src/ ├── components/ | └── TopNavbar.js ├── lib/ | ├── router.js | └── store.js ├── pages/ | ├── cart/ | | ├── cart.css | | ├── cart.html | | └── Cart.vue | ├── home/ | | ├── home.css | | ├── home.html | | └── Home.vue | ├── sign-in/ | | ├── sign-in.css | | ├── sign-in.html | | └── SignIn.vue | └── routes.js ├── App.vue └── main.js Hemos agregado tres páginas, cada una de las cuales las mantendremos muy básicas. Solo agregaremos componentes para que la navegación funcione sin recargas de página. TobNavbar Agregue lo siguiente para , y : src/pages/cart/Cart.vue src/pages/home/Home.vue src/pages/sign-in/SignIn.vue import TopNavbar from '../../components/TopNavbar.vue'; export default { components: { TopNavbar }, computed: {}, mounted() { }, data() { return { }; }, }; El componente ubicado en contendrá solo los enlaces de navegación. TopNavbar src/components Observe cómo aparece el componente de enlace del enrutador que forma parte del : vue-router Home Cart Sign In El archivo contiene todas las declaraciones de ruta para la aplicación. Así es como se ve: pages/routes.js import {createRouter} from 'vue-router' import Homepage from './home/Home.vue'; import SignIn from './sign-in/SignIn.vue'; import Cart from './cart/Cart.vue'; const routes = [ { path: '/', component: Homepage }, { path: '/sign-in/', component: SignIn }, { path: '/cart/', component: Cart }, ] export default function (history) { return createRouter({ history, routes }) } Antes de que estemos listos para ver el en acción, necesitamos hacer 2 cosas más: vue-router Cree el enrutador y agréguelo a la instancia principal de la aplicación Vue, en : 1) src/main.js import { createApp } from 'vue' import { createWebHistory } from 'vue-router' import createRouter from './pages/routes.js' import App from './App.vue' const router = createRouter(createWebHistory()) const app = createApp(App) app.use(router).mount('#app') Agregue el componente en : 2) src/App.vue Ahora vuelva a ejecutar si es necesario y luego navegue a donde tendrá una aplicación Vue 3 habilitada para enrutamiento. npm run dev http://localhost:3000 Configuración de la gestión de estado mediante Pinia A continuación, debemos configurar la tienda Pinia para nuestra aplicación. La tienda es donde se mantiene el estado de la aplicación. Pinia es un nuevo proyecto del equipo central de Vue.js y ahora es el enfoque recomendado para trabajar con el estado de la aplicación. Si ya está familiarizado con Vuex, acostumbrarse a Pinia será sencillo. De hecho, la API de Pinia es un poco más fácil y menos detallada que Vuex. Con Pinia, en una aplicación Vue 3 hay una tienda raíz y luego cualquier cantidad de tiendas individuales. Para nuestra aplicación de librería, vamos a usar solo dos tiendas: La tienda por : una lista de libros disponibles catálogo El de la tienda: libros que el usuario quiere pedir carrito Creando una pinia Una “Pinia” es la tienda raíz que tenemos que crear primero y luego pasar a la instancia de Vue. Lo haremos en y lo actualizaremos para que se vea así: src/main.js import { createApp } from 'vue' import { createWebHistory } from 'vue-router' import { createPinia } from 'pinia' import createRouter from './pages/routes.js' import App from './App.vue' const store = createPinia() const router = createRouter(createWebHistory()) const app = createApp(App) app.use(router).use(store).mount('#app') El siguiente paso es crear el catálogo individual y las tiendas de carros y usarlos en componentes. Adición de la tienda de catálogo Crear una tienda Pinia significa dos cosas principalmente:z Definición de la tienda Uso de la tienda en uno o más componentes Definición de la tienda Al igual que Vuex, la tienda de Pinia contiene el y dos tipos de métodos: y . estado captadores acciones Algunas cosas a considerar sobre una tienda: Los son funciones sincrónicas que se utilizan para recuperar datos del estado Getters son funciones que también pueden ser asíncronas y que se utilizan para actualizar el estado Actions El se define como una función que devuelve el estado inicial state Ahora es el momento de crear la tienda del catálogo dentro de : src/stores/catalog.js import { defineStore } from 'pinia' export const useCatalog = defineStore('catalog-store', { state: () => { return { newArrivals: [], fetching: false } }, getters: { results(state) { return state.newArrivals; }, isFetching(state) { return state.fetching; } }, actions: { async fetchNewArrivals() { this.fetching = true; const response = await fetch('/data/new-arrivals.json'); try { const result = await response.json(); this.newArrivals = result.books; } catch (err) { this.newArrivals = []; console.error('Error loading new arrivals:', err); return err; } this.fetching = false; } } }) Mirando el código fuente anterior, notará que tenemos dos 'captadores' ( e ) y una acción ( ). En lugar de un backend real, solo tenemos un archivo json ubicado en que contiene algunos libros que usaremos como nuestro catálogo. results isFetching fetchNewArrivals /data/new-arrivals.json También notará que nuestros 'captadores' no hacen nada especial con los datos y, por lo tanto, son un poco innecesarios, pero se incluyen para mostrar cómo puede definirlos. Uso de la tienda en una plantilla Vincular la definición anterior a una plantilla también es bastante sencillo. Vamos a crear un nuevo componente llamado dentro de que usaremos en el componente de la página . NewArrivals src/components/NewArrivals.vue Home.vue import {useCatalog} from '../../store/catalog.js' import { mapState, mapActions } from 'pinia' export default { computed: { ...mapState(useCatalog, {newArrivals: 'results'}) }, methods: { ...mapActions(useCatalog, ['fetchNewArrivals']), addToCart() { // we'll populate this later } }, created() { // when the template is created, we call this action this.fetchNewArrivals(); } }; El componente se convierte en: Home.vue import TopNavbar from '../../components/TopNavbar.vue'; import NewArrivals from '../../components/NewArrivals.vue'; export default { components: { TopNavbar, NewArrivals }, computed: {}, mounted() {}, data() { return {}; }, }; Aquí hay un diagrama de cómo la tienda y el componente funcionan juntos en la aplicación: También escribí una tienda y un componente para el carrito, pero no lo incluiré en el tutorial. El mecanismo es similar y puedes inspeccionar el código fuente en el repositorio que tiene todo incluido, incluso algunos estilos extra. Paso 3: prueba de los componentes de Vue.js La prueba de componentes es un tipo de prueba de interfaz de usuario en la que el componente se representa de forma aislada y sin el resto de los componentes de la aplicación, con el fin de verificar su funcionalidad. Por lo general, es una estrategia de prueba que ocurre antes del paso de prueba de extremo a extremo, que explicaremos en la siguiente sección. Necesitamos instalar el proyecto ; la biblioteca oficial de pruebas unitarias para Vue.js, necesitamos la que apunta a Vue 3. Vue TestUtils Puede instalar eso desde NPM con: npm install @vue/test-utils@next --save-dev Instalación de Nightwatch.js y ChromeDriver Usaremos Nightwatch.js tanto para las pruebas de componentes como para las pruebas de un extremo a otro. Nightwatch ya es uno de los marcos de prueba recomendados por el equipo de Vue.js y se publicó casi al mismo tiempo que Vue. Recientemente obtuvo soporte (todavía en versión beta) para la prueba de componentes de Vue a través de . vite-plugin-nightwatch Continuaremos e instalaremos Nightwatch v2 usando: npm install nightwatch--save-dev Y también necesitaremos el mencionado anteriormente: vite-plugin-nightwatch npm install vite-plugin-nightwatch --save-dev Nightwatch usa la para tareas de automatización del navegador y también necesitaremos instalar el paquete NPM, porque vamos a usar Chrome para ejecutar nuestras pruebas. API W3C WebDriver chromedriver npm install chromedriver --save-dev Prueba del componente Y con eso, hemos llegado al punto en el que finalmente podemos comenzar a escribir la prueba real para nuestro componente NewArrivals. El mencionado anteriormente incluye una página de renderizador de prueba y Nightwatch ya contiene todo lo necesario para ejecutar la prueba inicial de nuestro componente. vite-plugin-nightwatch Crea una carpeta y dentro de ella dos subcarpetas: test - esto llevará a cabo pruebas de componentes component : esto llevará a cabo pruebas de extremo a extremo e2e También necesitamos un archivo de configuración , pero podemos ejecutar Nightwatch directamente y crear el archivo de configuración automáticamente. Solo asegúrese de que también esté instalado (y el navegador Chrome, por supuesto). nightwatch.conf.js chromedriver Asegúrese de que el directorio de trabajo actual sea la raíz del proyecto y luego simplemente ejecute una que se incluye con Nightwatch. la prueba duckDuckGo porque es la más rápida: prueba de ejemplo duckDuckGo $ npx nightwatch examples/tests/duckDuckGo.js La estructura del proyecto debería verse así ahora: vue-bookstore/ ├── public/ | ├── data/ | └── favicon.ico ├── src/ ├── ... | └── main.js ├── test/ | ├── component/ | └── e2e/ ├─── nightwatch.conf.js ├─── package.json ├─── README.md └─── vite.config.js Continuaremos y crearemos un nuevo archivo llamado dentro . En él, agregaremos una prueba básica que monta el componente y comprueba si el elemento devuelto se puede encontrar en la página (es decir, el componente se ha montado). newArrivalsTest.js test/component describe('New Arrivals Component Test', function() { it('checks if the component has been mounted', async (browser) => { const component = await browser.mountVueComponent('/src/components/new-arrivals/NewArrivals.vue', { plugins: { router: '/src/lib/router.js' } }) expect(component).to.be.present; }); }); Nightwatch usa la misma sintaxis que Mocha. Incluso puede usar Mocha como corredor de pruebas si ya está familiarizado con él, pero no lo haremos por ahora. En caso de que desee usar Mocha, solo necesita deslizar algunos interruptores en el archivo de configuración de Nightwatch y hay documentación disponible en el sobre cómo hacerlo. describe() sitio web de Nightwatch Ahora es el momento de ejecutar la prueba anterior y para eso ejecutaremos Nightwatch usando Chrome, así: npx nightwatch test/component/newArrivalsTest.js --env chrome Esto abrirá el navegador Chrome y renderizará el componente, luego realizará la prueba. Si no le gusta ver aparecer la ventana del navegador durante la prueba, puede pasar el argumento the, así: --headless npx nightwatch test/component/newArrivalsTest.js --env chrome --headless La salida de la prueba debería verse como a continuación: [New Arrivals Component Test] Test Suite ────────────────────────────────────────────────────────────── ℹ Connected to ChromeDriver on port 9515 (652ms). Using: chrome (97.0.4692.99) on MAC OS X. Running tests the component: ────────────────────────────────────────────────────────────── ✔ Expected element to be present (1ms) OK. 1 assertions passed. (781ms) Por supuesto, puede consultar todas las opciones de CLI que proporciona el corredor Nightwatch, ya sea yendo a las o ejecutando: páginas de documentos npx nightwatch --help Ampliación de la prueba Es posible que haya notado que nuestra prueba de componentes no está probando mucho, lo que significa que la prueba no es tan útil como podría ser. Así que seguiremos adelante y lo extenderemos solo un poco. Solo inspeccionaremos el componente y verificaremos si hay una propiedad llamada , que se usa en el HTML para representar los resultados. NewArrivals newArrivals La prueba se ve así ahora. Hemos refactorizado el montaje del componente en el gancho para que solo podamos hacer las comprobaciones dentro de la prueba, el bloque . La biblioteca la proporciona Nightwatch lista para usar y se basa en la popular y versátil biblioteca de afirmaciones before it expect Chai.js. Más información sobre cómo usar la en el sitio web de . expect documentos de Nightwatch describe('New Arrivals Component Test', function() { let component; before(async () => { component = await browser.mountVueComponent('/src/components/new-arrivals/NewArrivals.vue', { plugins: { router: '/src/lib/router.js' } }) }); it('checks if the component has been mounted', function(browser) { expect(component).to.be.present; expect(component).to.have.property('newArrivals'); expect(component).text.toContain('The Memory Police') expect.elements('div.col-md-6').count.toEqual(4); expect(component.property('newArrivals')).to.be.an('array').with.length(1); }); }); Paso 4: prueba de extremo a extremo de la aplicación Vue.js Nos acercamos al final de este tutorial, pero antes de que podamos considerar que tenemos una aplicación Vue.js en funcionamiento, debemos agregar soporte para pruebas de extremo a extremo y configurar una canalización de CI en Github Actions. Afortunadamente, no necesitamos instalar ni configurar ninguna otra herramienta, excepto algunos reporteros elegantes, pero por ahora podemos obtener todo lo que necesitamos en términos de pruebas automatizadas de extremo a extremo de Nightwatch. Además de Chrome, Nightwatch tiene soporte integrado para todos los principales navegadores, incluidos Firefox, Edge y Safari, todo gracias a su integración con la API W3C Webdriver y Selenium. También le permite utilizar plataformas de pruebas en la nube distribuidas como , , o . BrowserStack SauceLabs CrossBrowserTesting LambdaTest Por ahora, mantendremos las cosas menos complejas y solo nos concentraremos en escribir algunas pruebas automatizadas básicas y ejecutarlas en Chrome, Firefox y Safari. Escribir la prueba de extremo a extremo de la página de inicio Comencemos con la prueba de extremo a extremo de la página de inicio y creemos un nuevo archivo en . La sintaxis es la misma que para la prueba de componentes, pero para ejecutar las pruebas de extremo a extremo usaremos la versión compilada de nuestra aplicación. test/e2e/homePageTest.js Por supuesto, podemos ejecutarlos contra la compilación del desarrollador, pero la práctica establecida en el desarrollo de software, por lo que sé, es ejecutar las pruebas de extremo a extremo en un entorno que simule la producción con una precisión razonable. Supongo que es por eso que se llaman pruebas de extremo a extremo, para ejecutarlas contra el producto final. Ejecución de la compilación de producción Para ejecutar la compilación de producción, tenemos dos opciones y cada una de ellas implica ejecutar un comando de , que está envuelto en tareas de NPM. Vite : esto generará index.html y los otros activos estáticos. Puede usar esta opción si ya tiene un servidor web local configurado. npm run build : esto generará una compilación de producción y la ejecutará utilizando el servidor de desarrollo integrado, de forma predeterminada en . npm run preview http://localhost:5000 La segunda opción es claramente más sencilla, así que ejecutemos el comando de y veamos qué sucede: preview $ npm run preview > vue-bookstore@0.0.0 preview /Users/andrei/workspace/vue-bookstore > vite preview > Local: http://localhost:5000/ > Network: use `--host` to expose Escribir el guión de prueba Ahora que tenemos una compilación lista para producción en ejecución, podemos comenzar a escribir la prueba real en . test/e2e/homePageTest.js Comenzaremos poco a poco, con solo lo siguiente: describe('Homepage End-to-end Test', () => { it('tests if homepage is loaded', browser => { browser .navigateTo('http://localhost:3000') .assert.visible('#app .new-arrivals-panel') .expect.elements('#app .new-arrivals-panel .col-md-6').count.toEqual(4) }); it('adds 2 volumes of "Rhinoceros and Other Plays" to cart', browser => { browser .click('.new-arrivals-panel .col-md-6:nth-child(2) button.add-to-cart') .click('.new-arrivals-panel .col-md-6:nth-child(2) button.add-to-cart') .assert.textEquals('.shopping-cart .badge', '2'); }); after(browser => browser.end()); }); La prueba verifica si el panel Novedades se muestra en la página y si contiene las 4 entradas que ya hemos visto. Ejecutar el script de prueba en Chrome Para ejecutar esto en Chrome, el comando es muy similar al de la prueba de componentes: npx nightwatch test/e2e/homePageTest.js --env chrome Y la salida será: [Homepage End-to-end Test] Test Suite ────────────────────────────────────────────────────────────── ℹ Connected to ChromeDriver on port 9515 (2454ms). Using: chrome (97.0.4692.99) on MAC OS X. Running tests the homepage: ────────────────────────────────────────────────────────────── ✔ Testing if element is visible (157ms) ✔ Expected elements count to equal: "4" (18ms) OK. 2 assertions passed. (765ms) Ejecutar el script de prueba en Firefox Si también queremos ejecutar nuestras pruebas de extremo a extremo en el navegador Firefox, solo necesitamos instalar (la implementación específica de Firefox de la API W3C WebDriver). No se necesita ninguna otra configuración para que funcione, a menos que desee personalizarla aún más. GeckoDriver Así que sigamos adelante e instálelo desde NPM: npm i geckodriver --save-dev Y luego ejecuta Nightwatch con el siguiente comando: npx nightwatch test/e2e/homePageTest.js --env firefox Y la salida: [Homepage End-to-end Test] Test Suite ────────────────────────────────────────────────────────────── ℹ Connected to GeckoDriver on port 4444 (1737ms). Using: firefox (96.0.2) on MAC (20.6.0). Running tests the homepage: ────────────────────────────────────────────────────────────── ✔ Testing if element is visible (54ms) ✔ Expected elements count to equal: "4" (6ms) OK. 2 assertions passed. (612ms) Ejecutar el script de prueba en Safari Si está utilizando una Mac, es probable que ya esté instalado, dependiendo de su versión de Safari. safaridriver Puede verificar con el uso de: safaridriver --help Y la salida debería verse así: Usage: safaridriver [options] -h, --help Prints out this usage information. --version Prints out version information and exits. -p, --port Port number the driver should use. If the server is already running, the port cannot be changed. If port 0 is specified, a default port will be used. --enable Applies configuration changes so that subsequent WebDriver sessions will run without further authentication. --diagnose Causes safaridriver to log diagnostic information for all sessions hosted by this instance. See the safaridriver(1) man page for more details about diagnostic logging. Antes de ejecutar su primera prueba en Safari, solo necesita habilitar la automatización con el siguiente comando: safaridriver --enable Y luego simplemente ejecute la prueba Nightwatch con: npx nightwatch test/e2e/homePageTest.js --env safari Ejecución en paralelo en varios navegadores Si necesita ejecutar sus pruebas de Nightwatch (ya sea por componentes o de un extremo a otro) en más de un navegador, puede hacerlo. Simplemente pase los navegadores como una lista separada por comas (sin espacios): Ejecutando en Firefox+Chrome npx nightwatch test/e2e/homePageTest.js --env firefox,chrome Ejecutar en Firefox+Chrome+Safari npx nightwatch test/e2e/homePageTest.js --env firefox,chrome,safari Nightwatch también admite la ejecución de pruebas en paralelo al dividir la cantidad total de archivos de script de prueba entre una cantidad configurable de trabajadores. Pero como solo tenemos un archivo por ahora, omitiremos esta parte. Más información sobre el paralelismo en el sitio web de . documentos de Nightwatch Paso 5: habilitar la integración continua con las acciones de Github Parece que es hora de terminar las cosas y poner todo junto. Antes de que podamos habilitar la implementación continua en Github Actions, debemos crear la tarea NPM de . test Creación de la tarea "prueba npm" Ahora tenemos pruebas de componentes y pruebas de extremo a extremo en nuestro proyecto de ejemplo. Por supuesto, es solo un nivel mínimo, por lo que no cubre todo, pero diría que es un buen comienzo. La forma más fácil de decirle a Nightwatch que ejecute todas las pruebas dentro de la carpeta de prueba es pasar la carpeta como el segundo argumento de la CLI. Agregaremos eso como una nueva tarea de NPM llamada así que editemos el y agreguemos lo siguiente, dentro del diccionario de "scripts": test package.json { "test": "nightwatch ./test" } Podemos ejecutar la tarea NPM y pasar argumentos CLI relacionados con Nightwatch de la siguiente manera: npm test -- --env chrome --headless Usaremos el modo para ejecutar las pruebas en Github Actions. --headless Agregar el flujo de trabajo de la acción de Github Finalmente, podemos agregar el flujo de trabajo de Github Actions para que nuestras pruebas puedan ejecutarse en cada envío y cada solicitud de extracción. Hacerlo es bastante sencillo. Usaremos la plantilla de Node.js y agregaremos algunos pasos nuevos en la lista, para: iniciar el servidor de desarrollo en segundo plano construir el proyecto e iniciar el servidor de desarrollo en modo de vista previa, también en segundo plano ejecutando pruebas de componentes y de un extremo a otro en Chrome, en modo sin cabeza Crear el flujo de trabajo de Github Actions significa agregar un nuevo archivo llamado en la carpeta que debería verse como se muestra a continuación. La mayor parte de esto se genera automáticamente cuando navega a la sección Acciones de su proyecto de Github y elige la plantilla de Node.js. node.js.yml .github/workflows name: Node.js CI on: push: branches: [ main ] pull_request: branches: [ main ] jobs: build: runs-on: ubuntu-latest strategy: matrix: node-version: [12.x, 14.x] steps: - uses: actions/checkout@v2 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v2 with: node-version: ${{ matrix.node-version }} - run: npm ci - name: Start vite dev server run: npm run dev & - name: Build the app run: npm run build - name: Start vite dev server in preview run: npm run preview & - name: Run Nightwatch tests run: npm test Y eso es. Se ejecutará una nueva compilación para cada nuevo git push o cada vez que se envíe una nueva solicitud de extracción. La compilación se ejecutará en 2 entornos separados, uno para el Nodo 12 y el otro para el Nodo 14, como se define en la definición del flujo de trabajo. A dónde ir desde aquí El proyecto está disponible en Github en y todo el código cubierto aquí y un poco más de estilo e imágenes. También contiene el código para el carrito de compras y una página de pago simulada. https://github.com/beatfactor/middlemarch Puede ejecutarlo en su máquina local con los pasos habituales: git clone https://github.com/beatfactor/middlemarch npm install npm run dev Siéntase libre de enviar solicitudes de extracción o informar problemas. Obtener apoyo Vue3, Vite y Pinia El equipo central de Vue.js brinda soporte comunitario para Vue3, Vite y Pinia en los siguientes canales: Servidor de chat en Discord VueLand Foro Vue en Github Debates de Vite de Pinia en Github Debates Vigilancia nocturna.js Para soporte con todo lo relacionado con las pruebas de Nightwatch, tenemos los siguientes canales: Debates de Github en Discord Servidor de chat Nightwatch.js Publicado por primera vez aquí