<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Puppeteer on Nicole van der Hoeven</title><link>https://nicolevanderhoeven.com/tags/puppeteer/</link><description>Recent content in Puppeteer on Nicole van der Hoeven</description><generator>Hugo -- gohugo.io</generator><language>en-us</language><copyright>Nicole van der Hoeven</copyright><lastBuildDate>Mon, 17 Jan 2022 16:30:07 +0100</lastBuildDate><atom:link href="https://nicolevanderhoeven.com/tags/puppeteer/index.xml" rel="self" type="application/rss+xml"/><item><title>Testing tool cheat sheet for load testers who don't just care about numbers</title><link>https://nicolevanderhoeven.com/blog/20220117-testing-tool-cheat-sheet-for-load-testers-who-dont-just-care-about-numbers/</link><pubDate>Mon, 17 Jan 2022 16:30:07 +0100</pubDate><guid>https://nicolevanderhoeven.com/blog/20220117-testing-tool-cheat-sheet-for-load-testers-who-dont-just-care-about-numbers/</guid><description>&lt;p&gt;It&amp;rsquo;s not enough to decide &lt;em&gt;how much&lt;/em&gt; load you want to generate. You also have to know &lt;em&gt;how&lt;/em&gt; you&amp;rsquo;re generating it.&lt;/p&gt;
&lt;p&gt;Your approach affects what part of your application is tested, the results returned, and the budget you&amp;rsquo;ll need to run your test.&lt;/p&gt;
&lt;p&gt;Here are three main categories of load testing tools:&lt;/p&gt;
&lt;h2 id="protocol-based-load-testing-tools"&gt;Protocol-based load testing tools:&lt;/h2&gt;
&lt;p&gt;These tools simulate the underlying messages sent back and forth between an application and a client.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Choose a protocol-based tool if&lt;/em&gt;: you want to generate massive load, you want to load test before components are integrated, you want to test APIs, or you are budget-conscious.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Best in class tools&lt;/em&gt;: Gatling, JMeter, k6, Locust, Neoload&lt;/p&gt;
&lt;h2 id="browser-based-load-testing-tools"&gt;Browser-based load testing tools:&lt;/h2&gt;
&lt;p&gt;These tools automate real user interactions with an interface.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Choose a browser-based tool if:&lt;/em&gt; you want to measure end-to-end performance, you want to reuse your browser automation scripts, you want front-end performance metrics, or you have a higher budget.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Best in class tools:&lt;/em&gt; Cypress, Flood Element, k6, Playwright, Puppeteer&lt;/p&gt;
&lt;h2 id="hybrid-load-testing-tools"&gt;Hybrid load testing tools:&lt;/h2&gt;
&lt;p&gt;This approach is a mixture of the previous two. You can do this in a few ways:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Use a protocol tool to generate the majority of the load, and a browser tool for a handful of virtual users &lt;em&gt;(best functionality, highest effort/cost)&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;Use a browser-based tool for all load &lt;em&gt;(expensive, simplest)&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;Find a tool that can do both &lt;em&gt;(ideal solution, few options)&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="whatever-you-choose-compare-like-with-like"&gt;Whatever you choose, compare like with like.&lt;/h2&gt;
&lt;p&gt;Happy testing!&lt;/p&gt;</description></item><item><title>Realistic load testing</title><link>https://nicolevanderhoeven.com/blog/20210807-clubhouse-realistic-load-tests/</link><pubDate>Sat, 07 Aug 2021 22:15:13 +0200</pubDate><guid>https://nicolevanderhoeven.com/blog/20210807-clubhouse-realistic-load-tests/</guid><description>&lt;p&gt;This is a conversation I recorded from Clubhouse in the Performance Engineers group created by NaveenKumar Namachivayam today, August 7th, 2021. I started by introducing myself and then let everyone know that I would be recording the conversation. Enjoy!&lt;/p&gt;
&lt;iframe src="https://open.spotify.com/embed/episode/5MJaz2PAhYfy5FShrIaXUK" width="100%" height="232" frameBorder="0" allowtransparency="true" allow="encrypted-media"&gt;&lt;/iframe&gt;
&lt;div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"&gt;
&lt;iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/-hBVZqNJ4_A?autoplay=0&amp;amp;controls=1&amp;amp;end=0&amp;amp;loop=0&amp;amp;mute=0&amp;amp;start=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="YouTube video"&gt;&lt;/iframe&gt;
&lt;/div&gt;</description></item><item><title>Cuándo JMeter no alcanza: Pruebas de carga simulando navegadores</title><link>https://nicolevanderhoeven.com/blog/20201216-cuando-jmeter-no-alcanza/</link><pubDate>Wed, 16 Dec 2020 18:18:23 +0100</pubDate><guid>https://nicolevanderhoeven.com/blog/20201216-cuando-jmeter-no-alcanza/</guid><description>&lt;p&gt;Aquí está el video de mi presentación en JMeter Scripting Day, un evento organizado por &lt;a href="https://jmeterenespanol.org/"&gt;JMeter en Español&lt;/a&gt; el 31 de Oktubre, 2020.&lt;/p&gt;
&lt;div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"&gt;
&lt;iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/1KB8e2Ld08M?autoplay=0&amp;amp;controls=1&amp;amp;end=0&amp;amp;loop=0&amp;amp;mute=0&amp;amp;start=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="YouTube video"&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;p&gt;Y la versión audio:&lt;/p&gt;
&lt;iframe src="https://open.spotify.com/embed-podcast/episode/1f17kzrbYmOxk8e65JBTQH" width="100%" height="232" frameborder="0" allowtransparency="true" allow="encrypted-media"&gt;&lt;/iframe&gt;
&lt;h2 id="introducción"&gt;Introducción&lt;/h2&gt;
&lt;p&gt;Hola a todos! Yo soy Nicole van der Hoeven, y soy performance tester. JMeter es una de mis herramientas favoritas porque es gratis, simple, y por muchos casos hace exactamente lo que quiero y no más. Sin embargo, como performers es parte de nuestro trabajo elegir la herramienta adecuada para cada proyecto, y hay que admitir que hay situaciones en que JMeter simplemente no es suficiente.&lt;/p&gt;
&lt;h2 id="amazon---ui--dev-tools"&gt;Amazon - UI + Dev Tools&lt;/h2&gt;
&lt;p&gt;Esto es el sitio web de Amazon.com. Tengo abierta la pantalla de Chrome Developer Tools, que me muestra las solicitudes (o requests) que componen la página. Cuándo vamos a la página, el navegador (Chrome en este caso) envia estas solicitudes para nosotros, pero eso occure en el fondo. Un usuario normal no las ve.&lt;/p&gt;
&lt;h2 id="jmeter---creando-un-script"&gt;JMeter - Creando un script&lt;/h2&gt;
&lt;p&gt;Lo que JMeter hace es grabar estas solicitudes y replicarlas. Aqui vemos una ejecución de un usuario virtual de un script en JMeter. Cada solicitud tiene la respuesta y el tiempo de respuesta. Pero eso no nos da una idea completa del rendimiento de la aplicación. ¿Por qué?&lt;/p&gt;
&lt;p&gt;Por que JMeter, como otras herramientas de nivel protocolo, tiene unas limitaciónes. La primera es que si hay javascript o otros script que deben estar ejecutado por el navegador, JMeter no los ejecuta. JMeter solo los descarga. El tiempo de respuesta mide la descarga, no la duración de la ejecución. Entonces, siempre habrá una diferencia entre los tiempos de respuesta en una prueba de JMeter y los tiempos de respuesta en práctica.&lt;/p&gt;
&lt;p&gt;A veces esta diferencia no es tan importante. Pero hay más y más aplicaciones hoy en día que se componen principalmente de estos javascript. Por esas aplicaciones, simplemente no es posible hacer un script en JMeter porque la mayoría de la lógica de la aplicación occure en el navegador, no en el servidor.&lt;/p&gt;
&lt;h2 id="flood-challenge"&gt;Flood Challenge&lt;/h2&gt;
&lt;p&gt;La segunda razón es que el aumento de la seguridad de aplicaciones conduce a solicitudes más complejas que incluyen parámetros dinámicos. Estos parámetros hacen que sea más difícil para un intermediario lanzar un ataque, pero también hacen que sea más difícil para nosotros scripters, porque tenemos que extraer información desde la última respuesta y ponerla en la próxima solicitud. Es posible, pero es la pesadilla de cada performance tester.&lt;/p&gt;
&lt;p&gt;Podemos verlo en la aplicación de muestra &lt;a href="https://challenge.flood.io"&gt;Flood Challenge&lt;/a&gt;. Ya no trabajo para Flood, pero todavía es un buen ejemplo.&lt;/p&gt;
&lt;h2 id="correlación-en-jmeter---flood-challenge-script"&gt;Correlación en JMeter - Flood challenge script&lt;/h2&gt;
&lt;p&gt;Esto es mi script en JMeter, y vemos que hay muchos parámetros que he tenido que correlacionar. La solicitud para simular hacer clic en el botón &amp;ldquo;Start&amp;rdquo; necesita los parámetros authenticity token, step ID, y step number, que son dinámicos. El contenido de los parámetros cambian cada vez que usamos esta aplicación.&lt;/p&gt;
&lt;h2 id="la-experiencia-del-usuario"&gt;La experiencia del usuario&lt;/h2&gt;
&lt;p&gt;La tercera razón es que JMeter tampoco mide la verdadera experiencia del usuario. Solo mide la duración de la comunicación entre el navegador y el servidor, pero no mide cosas como la representación de elementos en la página web, ni el efecto de un script que dura mucho tiempo para terminar.&lt;/p&gt;
&lt;p&gt;Eso es importante porque estas cosas afectan significativamente la experiencia del usuario. De hecho, Steve Souders, un conocido el la industría de performance, dice que &lt;a href="https://rigor.com/blog/80-90-of-load-times-are-spent-on-the-front-end-start-there/#:~:text=Start%20there.,-Written%20by%20Craig&amp;amp;text=Last%20month%2C%20Steve%20Souders%2C%20Google's,is%20spent%20on%20the%20frontend"&gt;hasta 90% del tiempo de respuesta&lt;/a&gt; que experimenta el usuario está en la interfaz. Con este numero podemos estar ciertos que una prueba con una herramienta de nivel protocolo no va a poder encapsular el rendimiento final de una aplicación.&lt;/p&gt;
&lt;h2 id="developer-tools---lighthouse"&gt;Developer Tools - Lighthouse&lt;/h2&gt;
&lt;p&gt;Entonces, ¿qué podemos hacer?&lt;/p&gt;
&lt;p&gt;Lo más fácil es intentar de medir la interfaz durante una prueba de cargas. Mientras ejecutamos una prueba con JMeter, podemos ir manualmente a la aplicación web en Chrome para usar Developer Tools. Podemos usar la pestaña Lighthouse, que nos da más métricos del perspectivo del usuario y sugerencias para mejorar el rendimiento.&lt;/p&gt;
&lt;h2 id="webpagetest"&gt;WebPageTest&lt;/h2&gt;
&lt;p&gt;También uso &lt;a href="https://webpagetest.org"&gt;WebPageTest&lt;/a&gt; a veces. Eso tiene más opciones para ejecutar la prueba automáticamente varias veces desde un lugar que puedo elegir. Aún podemos elegir un dispositivo para simular la experiencia de un usuario en un iPad, por ejemplo.&lt;/p&gt;
&lt;h2 id="herramientas-alternativas-para-pruebas-de-carga"&gt;Herramientas alternativas para pruebas de carga&lt;/h2&gt;
&lt;p&gt;Tambien podemos elegir herramientas alternativas para ejecutar nuestras pruebas de carga. Lo que tienen en común es que fueron diseñadas para pruebas de automatización, y utilizan un navegador real.&lt;/p&gt;
&lt;p&gt;&lt;a href="https://www.selenium.dev/"&gt;Selenium&lt;/a&gt; es probablemente la más popular de esas. Selenium WebDriver en particular. Es compatible con Ruby, Java, Python, C# y Javascript. El problema con Selenium es que puede ser muy pesada. En una machina probablamente podemos ejecutar cinco usuarios de Selenium, más o menos. Eso es importante si estamos tratando de simular miles de usuarios.&lt;/p&gt;
&lt;p&gt;Hay muchas herramientas basadas en Javascript que también podemos usar. Hay varias framework que se utilizan para adaptar Javascript y nodeJS.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Puppeteer fue desarollado por Google. Tricentis Flood también ha diseñado Element que utiliza Puppeteer, pero con un enfoque en el rendimiento.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;a href="https://github.com/microsoft/playwright"&gt;Playwright&lt;/a&gt; es una creación de Microsoft.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;a href="https://jest.io"&gt;Jest&lt;/a&gt; fue desarrollado por Facebook&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Mocha es otro framework que es la base para &lt;a href="https://cypress.io"&gt;Cypress&lt;/a&gt;.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Todos esas herramientas son open source y gratis. También hay alternativas propietarias, pero prefiero las soluciones open source porque en la mayoría de casos hacen la misma cosa y se actualizan con más frecuencia.&lt;/p&gt;
&lt;h2 id="element-script"&gt;Element script&lt;/h2&gt;
&lt;p&gt;Esto es un ejemplo de la misma acción, hacer clic en el botón Start en la aplicación Flood Challenge.&lt;/p&gt;
&lt;p&gt;Otra ventaja de simulando navegadores en vez de simulando las solicitudes es que es más simple crear un script. No tenemos que saber cada parámetro. Solo tenemos que describir lo que queremos que cada usuario virtual haga.&lt;/p&gt;
&lt;p&gt;Podemos ejecutar scripts usando estas herramientas al mismo tiempo que un script de &lt;a href="https://jmeter.apache.org"&gt;JMeter&lt;/a&gt; o &lt;a href="https://gatling.io"&gt;Gatling&lt;/a&gt; o lo que sea, y también tenemos la opción de reemplazar los script de protocolo con estas.&lt;/p&gt;
&lt;h2 id="conclusión"&gt;Conclusión&lt;/h2&gt;
&lt;p&gt;Para resumir, JMeter y otras herramientas de nivel protocolo tiene algunas limitaciones.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;No ejecutan scripts del lado del navegador&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Pueden ser más complicado correlacionar parámetros dinámicos&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;No miden la experiencia final de un usuario&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Para solucionar estos problemas, podemos complementar pruebas de carga tradicionales, de nivel protocolo, como JMeter, con herramientas simulando navegadores. De este modo podremos tener una comprensión más completa del rendimiento total de la aplicación.&lt;/p&gt;
&lt;p&gt;Bueno, se acabó el tiempo, entonces los dejo aquí. Gracias por escuchar, y me disculpo por mi español. Gracias a todos!&lt;/p&gt;</description></item><item><title>Ask a Flooder 16: How do I use test data with Element?</title><link>https://nicolevanderhoeven.com/blog/20200609-aaf16/</link><pubDate>Tue, 09 Jun 2020 22:18:41 +0100</pubDate><guid>https://nicolevanderhoeven.com/blog/20200609-aaf16/</guid><description>
&lt;link rel="canonical" href="https://www.flood.io/blog/ask-a-flooder-16-how-do-i-use-test-data-with-element-video"&gt;
&lt;p&gt;&lt;em&gt;Originally posted on &lt;a href="https://www.flood.io/blog/ask-a-flooder-16-how-do-i-use-test-data-with-element-video"&gt;Tricentis Flood&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;In this video, I discuss how to make your load testing scripts more realistic by including test data. The load testing tool I use is &lt;a href="https://element.flood.io/"&gt;Flood Element&lt;/a&gt;, but you can apply these principles to any tool. You&amp;rsquo;ll find a copy of the Element script I used below.&lt;/p&gt;
&lt;p&gt;‍&lt;div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"&gt;
&lt;iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/EGhVm-R12qI?autoplay=0&amp;amp;controls=1&amp;amp;end=0&amp;amp;loop=0&amp;amp;mute=0&amp;amp;start=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="YouTube video"&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/p&gt;
&lt;p&gt;And, if you prefer, here&amp;rsquo;s the audio version:&lt;/p&gt;
&lt;iframe src="https://open.spotify.com/embed-podcast/episode/4OW5slSCmAuBc9NPa1NKtk" width="100%" height="232" frameborder="0" allowtransparency="true" allow="encrypted-media"&gt;&lt;/iframe&gt;
&lt;h2 id="transcript"&gt;Transcript&lt;/h2&gt;
&lt;p&gt;Hi everyone, Nicole van der Hoeven here back with another Ask a Flooder, and this time the question is: How do I use test data with Flood Element?&lt;/p&gt;
&lt;p&gt;Now let&amp;rsquo;s talk about why you might want to use test data. In load testing, it&amp;rsquo;s important to make your scripts behave as similarly to real users as possible so that the load that you generate is production-like. The problem is that if you send the same data over and over again to the server, that server is probably going to cache that response. The response being cached means that the server will return the response way faster than it normally would if it had been a unique request. So we can use test data, instead of static data hardcoded in your scripts, to make sure that this doesn&amp;rsquo;t happen.&lt;/p&gt;
&lt;p&gt;Using test data can also help us test different responses. For example, let&amp;rsquo;s say we&amp;rsquo;re testing a loan application system, where a user inputs the application ID, the server looks it up, and returns the status of that loan application. Now, loan applications might be in different stages of the process. For instance, some might be saved but not submitted, or maybe they&amp;rsquo;ve been submitted but failed the identity verification check.&lt;/p&gt;
&lt;p&gt;If we used the same application ID every time, then the server would always return the same status and the same details. Instead, let&amp;rsquo;s create a CSV file that we can use as test data. It might look something like this.‍&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-shell" data-lang="shell"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;applicationId
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;A100001
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;B100002
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;C100003
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;D100004
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;We can have &lt;code&gt;applicationId&lt;/code&gt; as the single header here, and we can populate this with a list of different application IDs in different stages of the process. That way, when we run the script, the server will have to respond authentically to every request without it being cached.&lt;/p&gt;
&lt;p&gt;Now to create our script. This is an empty Element script. To start with, make sure you&amp;rsquo;re importing &lt;code&gt;TestData&lt;/code&gt; here in the first line of your script.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;import&lt;/span&gt; { &lt;span style="color:#a6e22e"&gt;step&lt;/span&gt;, &lt;span style="color:#a6e22e"&gt;TestSettings&lt;/span&gt;, &lt;span style="color:#a6e22e"&gt;Until&lt;/span&gt;, &lt;span style="color:#a6e22e"&gt;By&lt;/span&gt;, &lt;span style="color:#a6e22e"&gt;Browser&lt;/span&gt;, &lt;span style="color:#a6e22e"&gt;TestData&lt;/span&gt; } &lt;span style="color:#a6e22e"&gt;from&lt;/span&gt; &lt;span style="color:#e6db74"&gt;&amp;#39;@flood/element&amp;#39;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;The first thing we&amp;rsquo;re going to need to do is to create an interface for the CSV file. Let&amp;rsquo;s call it &lt;code&gt;AppData&lt;/code&gt;. Within this interface, we&amp;rsquo;ll need to define all the fields that we intend to use in our data file and what type of values we can expect to be in those fields. Looking at our CSV here, we&amp;rsquo;ve just got the application ID, so I&amp;rsquo;m just going to copy that, and it&amp;rsquo;s a mixture of characters and numbers, so I&amp;rsquo;m going to put that in as a string.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;interface&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;AppData&lt;/span&gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;applicationId&lt;/span&gt; &lt;span style="color:#f92672"&gt;:&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;string&lt;/span&gt;    
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Now we need to tell Element how to find this test data. We&amp;rsquo;ll say that it&amp;rsquo;s from the CSV, using the interface we&amp;rsquo;ve just created. Now we&amp;rsquo;ll tell Element the filename. In this situation, the CSV file that I&amp;rsquo;m using is actually in the same directory, so I don&amp;rsquo;t need to specify a path here, but if you&amp;rsquo;re putting it somewhere else, then you&amp;rsquo;ll need to specify the folder and the path to it.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#a6e22e"&gt;TestData&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;fromCSV&lt;/span&gt;&lt;span style="color:#f92672"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color:#a6e22e"&gt;AppData&lt;/span&gt;&lt;span style="color:#f92672"&gt;&amp;gt;&lt;/span&gt;(&lt;span style="color:#e6db74"&gt;&amp;#39;applicationids.csv&amp;#39;&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Now let&amp;rsquo;s use the data in a step. In real life, you might want to use an application ID to type it into a text field, but for demonstration purposes, I&amp;rsquo;m just going to show you how to output it to the console log. Printing to the console is also a good way to debug your tests, especially if you&amp;rsquo;re dealing with test data.&lt;/p&gt;
&lt;p&gt;We need to let Element know that we want to use AppData. So now, let&amp;rsquo;s output this to the console. Since we&amp;rsquo;re just debugging, let&amp;rsquo;s output the application ID. To actually get the value from the data file, we&amp;rsquo;ll use this syntax:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#a6e22e"&gt;step&lt;/span&gt;(&lt;span style="color:#e6db74"&gt;&amp;#39;Print to console&amp;#39;&lt;/span&gt;, &lt;span style="color:#66d9ef"&gt;async&lt;/span&gt; (&lt;span style="color:#a6e22e"&gt;browser&lt;/span&gt;&lt;span style="color:#f92672"&gt;:&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;Browser&lt;/span&gt;, &lt;span style="color:#a6e22e"&gt;data&lt;/span&gt;&lt;span style="color:#f92672"&gt;:&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;AppData&lt;/span&gt;) =&amp;gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;console&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;log&lt;/span&gt;(&lt;span style="color:#e6db74"&gt;&amp;#39;application ID: &amp;#39;&lt;/span&gt;, &lt;span style="color:#e6db74"&gt;`&lt;/span&gt;&lt;span style="color:#e6db74"&gt;${&lt;/span&gt;&lt;span style="color:#a6e22e"&gt;data&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;applicationId&lt;/span&gt;&lt;span style="color:#e6db74"&gt;}&lt;/span&gt;&lt;span style="color:#e6db74"&gt;`&lt;/span&gt;) 
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;})
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;‍By default, Element reads the data files sequentially. The problem with that is we only have a handful of application IDs. So if we wanted to run this one script 100 times, we&amp;rsquo;re going to run out of data. What we can do here is add &lt;code&gt;circular&lt;/code&gt;. That way, when the script reaches the very last value of the file, the next value it selects will be the first one, and it never runs out of test data.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#a6e22e"&gt;TestData&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;fromCSV&lt;/span&gt;&lt;span style="color:#f92672"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color:#a6e22e"&gt;AppData&lt;/span&gt;&lt;span style="color:#f92672"&gt;&amp;gt;&lt;/span&gt;(&lt;span style="color:#e6db74"&gt;&amp;#39;applicationids.csv&amp;#39;&lt;/span&gt;)    
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; .&lt;span style="color:#a6e22e"&gt;circular&lt;/span&gt;()
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Another thing you might be wondering is how to make it so that Element chooses a random value every time. To do that, we&amp;rsquo;ll also have to add &lt;code&gt;shuffle&lt;/code&gt;:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#a6e22e"&gt;TestData&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;fromCSV&lt;/span&gt;&lt;span style="color:#f92672"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color:#a6e22e"&gt;AppData&lt;/span&gt;&lt;span style="color:#f92672"&gt;&amp;gt;&lt;/span&gt;(&lt;span style="color:#e6db74"&gt;&amp;#39;applicationids.csv&amp;#39;&lt;/span&gt;)    
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; .&lt;span style="color:#a6e22e"&gt;circular&lt;/span&gt;()
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;‍Now let&amp;rsquo;s try to run the test.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-shell" data-lang="shell"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;element run test-data.ts
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;As you can see, it&amp;rsquo;s been finished. The application ID that was selected was indeed a random one because the first one would have started with A. So, it actually chose the last one randomly.&lt;/p&gt;
&lt;p&gt;And that&amp;rsquo;s it for test data with Element. Now, this user actually had a follow-up question, which was about unique test data. I&amp;rsquo;m going to answer that in the next video. Until next time, happy Flooding!&lt;/p&gt;
&lt;h2 id="sample-script"&gt;Sample script&lt;/h2&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;import&lt;/span&gt; { &lt;span style="color:#a6e22e"&gt;step&lt;/span&gt;, &lt;span style="color:#a6e22e"&gt;TestSettings&lt;/span&gt;, &lt;span style="color:#a6e22e"&gt;Until&lt;/span&gt;, &lt;span style="color:#a6e22e"&gt;By&lt;/span&gt;, &lt;span style="color:#a6e22e"&gt;Browser&lt;/span&gt;, &lt;span style="color:#a6e22e"&gt;TestData&lt;/span&gt; } &lt;span style="color:#a6e22e"&gt;from&lt;/span&gt; &lt;span style="color:#e6db74"&gt;&amp;#39;@flood/element&amp;#39;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;import&lt;/span&gt; &lt;span style="color:#f92672"&gt;*&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;as&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;assert&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;from&lt;/span&gt; &lt;span style="color:#e6db74"&gt;&amp;#39;assert&amp;#39;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;export&lt;/span&gt; &lt;span style="color:#66d9ef"&gt;const&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;settings&lt;/span&gt;&lt;span style="color:#f92672"&gt;:&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;TestSettings&lt;/span&gt; &lt;span style="color:#f92672"&gt;=&lt;/span&gt; {    
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;loopCount&lt;/span&gt;&lt;span style="color:#f92672"&gt;:&lt;/span&gt; &lt;span style="color:#f92672"&gt;-&lt;/span&gt;&lt;span style="color:#ae81ff"&gt;1&lt;/span&gt;,    
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;description&lt;/span&gt;&lt;span style="color:#f92672"&gt;:&lt;/span&gt; &lt;span style="color:#e6db74"&gt;&amp;#39;Test Data&amp;#39;&lt;/span&gt;,    
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;screenshotOnFailure&lt;/span&gt;&lt;span style="color:#f92672"&gt;:&lt;/span&gt; &lt;span style="color:#66d9ef"&gt;true&lt;/span&gt;,    
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;disableCache&lt;/span&gt;&lt;span style="color:#f92672"&gt;:&lt;/span&gt; &lt;span style="color:#66d9ef"&gt;true&lt;/span&gt;,    
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;clearCache&lt;/span&gt;&lt;span style="color:#f92672"&gt;:&lt;/span&gt; &lt;span style="color:#66d9ef"&gt;true&lt;/span&gt;,    
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;clearCookies&lt;/span&gt;&lt;span style="color:#f92672"&gt;:&lt;/span&gt; &lt;span style="color:#66d9ef"&gt;true&lt;/span&gt;,
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#75715e"&gt;/*** Test Data * Version: 1.0 */&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;export&lt;/span&gt; &lt;span style="color:#66d9ef"&gt;default&lt;/span&gt; () =&amp;gt; {    
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;interface&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;AppData&lt;/span&gt; {        
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;applicationId&lt;/span&gt; &lt;span style="color:#f92672"&gt;:&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;string&lt;/span&gt;    }    
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;TestData&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;fromCSV&lt;/span&gt;&lt;span style="color:#f92672"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color:#a6e22e"&gt;AppData&lt;/span&gt;&lt;span style="color:#f92672"&gt;&amp;gt;&lt;/span&gt;(&lt;span style="color:#e6db74"&gt;&amp;#39;applicationids.csv&amp;#39;&lt;/span&gt;)    
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; .&lt;span style="color:#a6e22e"&gt;circular&lt;/span&gt;()    
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; .&lt;span style="color:#a6e22e"&gt;shuffle&lt;/span&gt;()    
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;step&lt;/span&gt;(&lt;span style="color:#e6db74"&gt;&amp;#39;Print to console&amp;#39;&lt;/span&gt;, &lt;span style="color:#66d9ef"&gt;async&lt;/span&gt; (&lt;span style="color:#a6e22e"&gt;browser&lt;/span&gt;&lt;span style="color:#f92672"&gt;:&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;Browser&lt;/span&gt;, &lt;span style="color:#a6e22e"&gt;data&lt;/span&gt;&lt;span style="color:#f92672"&gt;:&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;AppData&lt;/span&gt;) =&amp;gt; {        
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;console&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;log&lt;/span&gt;(&lt;span style="color:#e6db74"&gt;&amp;#39;application ID: &amp;#39;&lt;/span&gt;, &lt;span style="color:#e6db74"&gt;`&lt;/span&gt;&lt;span style="color:#e6db74"&gt;${&lt;/span&gt;&lt;span style="color:#a6e22e"&gt;data&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;applicationId&lt;/span&gt;&lt;span style="color:#e6db74"&gt;}&lt;/span&gt;&lt;span style="color:#e6db74"&gt;`&lt;/span&gt;)    
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; })
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description></item><item><title>Ask a Flooder 15: How do I install Element?</title><link>https://nicolevanderhoeven.com/blog/20200512-aaf15/</link><pubDate>Tue, 12 May 2020 22:45:18 +0100</pubDate><guid>https://nicolevanderhoeven.com/blog/20200512-aaf15/</guid><description>
&lt;link rel="canonical" href="https://www.flood.io/blog/ask-a-flooder-15-how-do-i-install-element-video"&gt;
&lt;p&gt;&lt;em&gt;Originally posted &lt;a href="https://www.flood.io/blog/ask-a-flooder-15-how-do-i-install-element-video"&gt;here&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;In this Flood Element tutorial, I demonstrate the steps required to install Flood Element, including dependencies it requires. Flood Element is an open-source browser-based load testing tool created by Tricentis Flood.&lt;/p&gt;
&lt;p&gt;&lt;a href="https://bit.ly/2YM1mnV"&gt;Learn more about Flood Element&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://nodejs.org/en/download/current/"&gt;Installation instructions for NodeJS&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://classic.yarnpkg.com/en/docs/install/"&gt;Installation instructions for Yarn&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://bit.ly/2yuYrWl"&gt;Installation instructions for Element&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=oWtnStKrh98"&gt;Video: Getting Started with Element&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://bit.ly/2YJIQg5"&gt;Guides: Using Element with Flood‍&lt;/a&gt;&lt;/p&gt;
&lt;div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"&gt;
&lt;iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/N7VLqqueqJE?autoplay=0&amp;amp;controls=1&amp;amp;end=0&amp;amp;loop=0&amp;amp;mute=0&amp;amp;start=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="YouTube video"&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;p&gt;Audio version here:&lt;/p&gt;
&lt;iframe src="https://open.spotify.com/embed-podcast/episode/6EZ97ImNGUiDAGcEyGGNYM" width="100%" height="232" frameborder="0" allowtransparency="true" allow="encrypted-media"&gt;&lt;/iframe&gt;
&lt;h2 id="transcript"&gt;Transcript&lt;/h2&gt;
&lt;p&gt;Hi everyone, Nicole van der Hoeven here again, back with another Ask a Flooder, and today&amp;rsquo;s question is: &amp;ldquo;How do I install Element?&amp;rdquo;&lt;/p&gt;
&lt;p&gt;Now, I already made a previous video on how to get started with Element, but I didn&amp;rsquo;t actually go into the details of how to install it, so that&amp;rsquo;s what I&amp;rsquo;m going to do in this video today. There are actually a few parts to installing Element, and all of these instructions are going to be on &lt;a href="http://element.flood.io/"&gt;element.flood.io&lt;/a&gt;. If you go onto the site and click on Install, you&amp;rsquo;ll see all of the instructions depending on which operating system you&amp;rsquo;re on.&lt;/p&gt;
&lt;p&gt;First, you need to install NodeJS. This is sort of like how, if you&amp;rsquo;re familiar with JMeter, you have to install Java before installing JMeter. NodeJS is what Element runs on. Secondly, you&amp;rsquo;ll need a package manager. You can use NPM or Yarn, but in this video, I&amp;rsquo;m going to take you through how to do it with Yarn. And thirdly, there&amp;rsquo;s installing Element itself.&lt;/p&gt;
&lt;p&gt;First, download NodeJS. I&amp;rsquo;m going to leave links in the description to all of the sites that I visit so that you can go through all of the instructions later. On the Node site, download whichever installer suits your operating system. Go through the installation steps, and afterwards, check to make sure that NodeJS is properly installed on your machine. You can do that by going into the terminal and typing:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-shell" data-lang="shell"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;node -v
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Just make sure that the version that&amp;rsquo;s shown here is the same version that you&amp;rsquo;ve downloaded.&lt;/p&gt;
&lt;p&gt;Secondly, install the latest version of Yarn. On the Yarn site, you&amp;rsquo;re going to have to choose your operating system and the version. We recommend using the latest stable version. And then go through the instructions for your operating system. After you&amp;rsquo;ve done that, check your Yarn installation by typing:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-shell" data-lang="shell"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;yarn --version
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And the last step is installing Element. On the Element site, you can find the exact code that you need to type into your terminal. It&amp;rsquo;s:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-shell" data-lang="shell"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;yarn global add @flood/element-cli
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;So you can just copy that into your terminal. As of the time of this recording, the latest version of Element is 1.2.3. Looks like that&amp;rsquo;s installed. To check the version of Element, type:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-shell" data-lang="shell"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;element --version
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;So that&amp;rsquo;s how to install Element. We&amp;rsquo;ve gotten a lot of questions recently about Element in particular, so I&amp;rsquo;m going to answering them in future videos. Hope this helped, and until next time, happy flooding!&lt;/p&gt;</description></item><item><title>Browser-based load testing in 2020</title><link>https://nicolevanderhoeven.com/blog/20200423-browser-based-load-testing-2020/</link><pubDate>Thu, 23 Apr 2020 16:48:09 +0100</pubDate><guid>https://nicolevanderhoeven.com/blog/20200423-browser-based-load-testing-2020/</guid><description>
&lt;link rel="canonical" href="https://www.flood.io/blog/browser-based-load-testing-in-2020"&gt;
&lt;p&gt;&lt;em&gt;Originally posted &lt;a href="https://www.flood.io/blog/browser-based-load-testing-in-2020"&gt;here&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;We &lt;a href="https://flood.io/blog/level-up-your-load-testing-with-browser-level-users"&gt;first announced&lt;/a&gt; our open-source browser-based load testing tool based on Puppeteer, &lt;a href="https://element.flood.io/"&gt;Flood Element&lt;/a&gt;, in February 2018. Despite our decision to make it an entirely separate tool from Flood, we&amp;rsquo;ve enjoyed using it so much as a team that several of us have written about it:&lt;/p&gt;
&lt;p&gt;Tim Koopmans: &lt;a href="https://flood.io/blog/load-testing-for-devops-with-browser-level-users-blu"&gt;Load testing for DevOps&amp;hellip; with Browser Level Users (BLU)&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Kevin Dunne: &lt;a href="https://flood.io/blog/a-new-approach-to-load-testing-with-browser-level-users"&gt;A new approach to load testing with browser level users&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;me: &lt;a href="https://flood.io/blog/prepare-for-viral-videos-with-flood-element"&gt;Prepare for viral videos with Flood Element&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Lachie Cox: &lt;a href="https://flood.io/blog/why-you-should-load-test-with-browsers"&gt;Why should you load test with real browsers?&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;our friend Eduardo Riol, as translated by Antonio Jimenez: &lt;a href="https://flood.io/blog/selenium-vs-puppeteer-for-test-automation-is-a-new-leader-emerging"&gt;Puppeteer vs. Selenium for test automation: is a new leader emerging?&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Clearly, we&amp;rsquo;re huge fans of load testing a web application with real browsers. But does the wider software testing industry share that sentiment?&lt;/p&gt;
&lt;h2 id="browser-based-load-testing-in-2020"&gt;Browser-based load testing in 2020&lt;/h2&gt;
&lt;p&gt;Browser-level load testing is still pretty new, and there aren&amp;rsquo;t too many providers offering it right now. Luckily, we just so happen to have access to a database of load tests run on Flood since 2013. Here&amp;rsquo;s a bar chart visualizing data we&amp;rsquo;ve collected about the load testing tools flooders have used (we support Selenium, JMeter, Gatling, and Element).&lt;/p&gt;
&lt;h3 id="load-tests-executed-on-flood-over-time-grouped-by-load-testing-tool"&gt;Load tests executed on Flood over time, grouped by load testing tool&lt;/h3&gt;
&lt;p&gt;&lt;img src="https://nicolevanderhoeven.com/assets/20200423-01.png" alt="" loading="lazy" decoding="async"&gt;
&lt;/p&gt;
&lt;h3 id="browser-level-load-testing-is-increasing-in-popularity"&gt;Browser-level load testing is increasing in popularity&lt;/h3&gt;
&lt;h4 id="in-2020-almost-35-of-the-load-tests-run-on-flood-are-browser-based-load-tests"&gt;In 2020, almost 35% of the load tests run on Flood are browser-based load tests.&lt;/h4&gt;
&lt;p&gt;While the total number of load tests run across all tools increased across the board, the percentage of tests that utilized Selenium and Element, as compared to JMeter and Gatling, has also increased from 2018. Both Selenium and Element are browser-based load testing tools.&lt;/p&gt;
&lt;p&gt;By contrast, JMeter, a protocol-level load testing tool which previously enjoyed a 70% share of the traffic on Flood, now accounts for only a bit over 50% of usage. JMeter&amp;rsquo;s share of the protocol-level pie is higher than Gatling&amp;rsquo;s, but the percentage of usage for both tools appears to be contracting when compared to that of browser-based tools.&lt;/p&gt;
&lt;h3 id="element-use-is-increasing-faster-than-selenium-use"&gt;Element use is increasing faster than Selenium use&lt;/h3&gt;
&lt;p&gt;Despite the fact that Selenium has been around longer, &lt;strong&gt;25% of all floods today are run using Element&lt;/strong&gt;. This is a significant increase in just two years, and one that bodes well for the future. While we&amp;rsquo;re still fans of Selenium and still support it, one reason we see for the dominance of Element in today&amp;rsquo;s market is resource efficiency.&lt;/p&gt;
&lt;p&gt;In our baseline tests, we&amp;rsquo;ve seen that Element can run from 20-50 users per Flood node (an &lt;a href="https://aws.amazon.com/blogs/aws/m5-the-next-generation-of-general-purpose-ec2-instances/"&gt;AWS m5.xlarge instance&lt;/a&gt;), whereas Selenium can only run up to 5. This leads to some significant cost savings, as running the same number of users with Element requires fewer load generators than with Selenium.&lt;/p&gt;
&lt;p&gt;Another reason might be the fact that Element uses Puppeteer in the background. Puppeteer, developed by Google, understandably shines when driving Google Chrome (and recently, Firefox). Puppeteer load testing is growing in popularity due to the wealth of metrics it has access to.&lt;/p&gt;
&lt;h2 id="how-browser-based-load-testing-works"&gt;How browser-based load testing works&lt;/h2&gt;
&lt;p&gt;Traditional load testing is done on the protocol level by sending messages directly to the web server. These messages are sent without simulating the application interface, and the responses that are received from the server are not visualized, either. &amp;ldquo;Users&amp;rdquo; in protocol-level load testing scripts are actually threads, with each one sending a list of messages at predefined intervals, and we refer to these users as Protocol-Level Users (PLU). JMeter and Gatling use PLU to generate load.&lt;/p&gt;
&lt;p&gt;The screenshot below shows what one request for a single action might look like in a JMeter test plan.&lt;/p&gt;
&lt;p&gt;&lt;img src="https://nicolevanderhoeven.com/assets/20200423-02.jpg" alt="" loading="lazy" decoding="async"&gt;
&lt;em&gt;Example of an HTTP request with parameters on JMeter&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;In browser-based load testing, real browser instances are opened on load generators, and the load testing tool plays the part of a real user in navigating the web application using the GUI. We refer to the virtual users in browser-based load testing as Browser-Level Users (BLU).&lt;/p&gt;
&lt;p&gt;Here&amp;rsquo;s an example of the same action in the JMeter example above, but this time in an Element test script:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#a6e22e"&gt;step&lt;/span&gt;(&lt;span style="color:#e6db74"&gt;&amp;#39;Step 1&amp;#39;&lt;/span&gt;, &lt;span style="color:#66d9ef"&gt;async&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;browser&lt;/span&gt; =&amp;gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#75715e"&gt;//Click Start button
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;let&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;startButton&lt;/span&gt; &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#66d9ef"&gt;await&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;browser&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;findElement&lt;/span&gt;(&lt;span style="color:#e6db74"&gt;&amp;#39;.btn-default&amp;#39;&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;await&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;startButton&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;click&lt;/span&gt;()
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;})
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;This version simply describes the button to be found and clicked, whereas the protocol-level version needs to be more precise in what exactly is passed to the server.&lt;/p&gt;
&lt;p&gt;Both types of load testing tools can apply the same load on an application (as long as it supports both methods— see the next section). The main difference is in how the load is generated.&lt;/p&gt;
&lt;p&gt;A protocol-level script will contain instructions on which messages to send, which protocols to use, which headers to include, and other information that a typical end-user would not see.&lt;/p&gt;
&lt;p&gt;A browser-level script will contain instructions on how to &lt;em&gt;interact&lt;/em&gt; with the application: which buttons to click, what to type in text fields, which links to follow, and other on-screen elements that an end-user would be familiar with. This leads us to one of the big advantages of browser-based load testing.&lt;/p&gt;
&lt;h2 id="pros-and-cons-of-browser-based-load-testing"&gt;Pros and cons of browser-based load testing&lt;/h2&gt;
&lt;h3 id="pros"&gt;Pros&lt;/h3&gt;
&lt;h4 id="simple-scripting-or-no-scripting-at-all"&gt;Simple scripting— or no scripting at all&lt;/h4&gt;
&lt;p&gt;Protocol-level tools require in-depth knowledge about how an application works, what format it expects requests to be in, and how it responds. On the browser-level, you don&amp;rsquo;t need to know any of that. When scripting a login process, for instance, you just need to tell the script to type a username and password in the right fields and then click Log In. The script doesn&amp;rsquo;t need to know that the form submits an encrypted request using the Auth0 API (something you&amp;rsquo;d need to know for a protocol-level script).&lt;/p&gt;
&lt;p&gt;In some cases, you might be able to get away with using something like our &lt;a href="https://flood.io/blog/record-load-tests-in-flood-element-using-qtest-explorer"&gt;qTest Explorer plugin&lt;/a&gt; to record a business process, generating a script without any scripting at all. Even when you have to write or modify the script, though, it&amp;rsquo;s a lot less intimidating than most protocol-level scripts.&lt;/p&gt;
&lt;p&gt;They&amp;rsquo;re also easier to troubleshoot. In addition to opening a real browser instance on your computer when you run a script locally, Element can also display this information on the console (shown here on iTerm):&lt;/p&gt;
&lt;p&gt;‍&lt;img src="https://nicolevanderhoeven.com/assets/20200423-03.jpg" alt="" loading="lazy" decoding="async"&gt;
&lt;em&gt;Screenshots upon execution on Element using iTerm&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;‍This allows you to understand what&amp;rsquo;s going on in the script and in the application, letting you detect bottlenecks faster.&lt;/p&gt;
&lt;h4 id="reduced-test-complexity"&gt;Reduced test complexity&lt;/h4&gt;
&lt;p&gt;The streamlined requirements for scripting lead to a straightforward test. There&amp;rsquo;s no chance of getting request parameters or values wrong.&lt;/p&gt;
&lt;h4 id="ability-to-test-entire-stack-from-the-user-perspective"&gt;Ability to test entire stack from the user perspective&lt;/h4&gt;
&lt;p&gt;Unlike testing APIs, you don&amp;rsquo;t need to decide which server you want to hit or make sure you have the appropriate requests to hit all the servers. A browser-level test script interacts with page elements like a real user would, so all underlying application servers are tested. Pair this with &lt;a href="https://guides.flood.io/infrastructure/demand-infrastructure/advantages-of-testing-in-the-cloud"&gt;cloud-based infrastructure on Flood&lt;/a&gt;, and you&amp;rsquo;ve got a compact package for testing your application.&lt;/p&gt;
&lt;h4 id="capable-of-testing-any-user-behavior"&gt;Capable of testing any user behavior&lt;/h4&gt;
&lt;p&gt;Protocol-level load test tools struggle with some types of applications, such as single-page apps (SPAs), where a lot of the processing is done on the client side. Browser-level load testing tools shine here, because scripted interactions for these apps are no different for SPAs than other web apps.&lt;/p&gt;
&lt;h4 id="record-network-and-user-interaction-times-for-front-end-optimization"&gt;Record network and user interaction times for front-end optimization&lt;/h4&gt;
&lt;p&gt;Browser-level tools show you response times from the user&amp;rsquo;s perspective: how long after a user clicks the log in button does the user see his or her account balance? This metric is a practical one that may differ wildly from the traditional response times that a protocol-level tool reports. Measuring real user experience is a great value add for your test.&lt;/p&gt;
&lt;h4 id="easier-to-maintain"&gt;Easier to maintain&lt;/h4&gt;
&lt;p&gt;Lower script complexity means that a browser-based test script is more resilient to changes in the codebase. A change in the underlying requests sent will not require a change in the test script, making it perfect for regression testing.&lt;/p&gt;
&lt;p&gt;It&amp;rsquo;s also easier to pass on to other members of the team due to high readability. Here&amp;rsquo;s an example of how to select a value from a dropdown menu in Element:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;await&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;browser&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;selectByValue&lt;/span&gt;(&lt;span style="color:#e6db74"&gt;&amp;#39;#challenger_age&amp;#39;&lt;/span&gt;,&lt;span style="color:#e6db74"&gt;&amp;#39;34&amp;#39;&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It&amp;rsquo;s easy to see that the script is looking for an element with the ID &amp;ldquo;challenger_age&amp;rdquo; and selecting the value &amp;ldquo;34&amp;rdquo;. This step could correspond to dozens of requests that need to be scripted if testing on the protocol level, which makes those scripts harder to understand without a proper handover.&lt;/p&gt;
&lt;h3 id="cons"&gt;Cons&lt;/h3&gt;
&lt;p&gt;Browser-based load testing tools have a higher CPU and memory footprint than protocol-based tools. Test scripts in JMeter and Gatling send messages to and record responses from a server without really needing to parse responses. By contrast, browser-based tools parse the server response in order to access the Domain Object Model (DOM) elements on the page.&lt;/p&gt;
&lt;p&gt;Using real browsers might be closer to the real user experience, but it also takes its toll on node resources. It is possible to run in headless mode, where browsers are started &amp;ldquo;invisibly&amp;rdquo; without actually graphically rendering them. However, even then, a browser-level tool can run fewer concurrent users on a node than a protocol-level tool.&lt;/p&gt;
&lt;h2 id="best-tools-and-applications-for-browser-based-load-testing"&gt;Best tools and applications for browser-based load testing&lt;/h2&gt;
&lt;p&gt;While other commercial tools exist for this, we&amp;rsquo;re partial to open source tools at Flood.&lt;/p&gt;
&lt;h3 id="selenium"&gt;Selenium&lt;/h3&gt;
&lt;p&gt;&lt;img src="https://nicolevanderhoeven.com/assets/20200423-04.jpg" alt="" loading="lazy" decoding="async"&gt;
&lt;/p&gt;
&lt;p&gt;Selenium load testing is appealing because Selenium is already well-known for test automation and functional testing, and a lot of companies already have full test suites in Selenium. The possibility of reusing those resources and just running them at scale as load tests is, by far, the most compelling reason to use Selenium.&lt;/p&gt;
&lt;h3 id="puppeteer"&gt;Puppeteer&lt;/h3&gt;
&lt;p&gt;&lt;img src="https://nicolevanderhoeven.com/assets/20200423-05.jpg" alt="" loading="lazy" decoding="async"&gt;
&lt;/p&gt;
&lt;p&gt;Google&amp;rsquo;s just getting started with Puppeteer, and the amount of metrics it exposes is exciting: it seems like anything in Chrome Developer Tools can be accessed by Puppeteer. Imagine running a load test on ONE tool that gives you statistics about back-end performance (response times, the effect of bandwidth restrictions, resources returning errors) AND front-end performance (client-side script console logs, render times, time to first paint, etc). It&amp;rsquo;s hard to imagine a future where this ISN&amp;rsquo;T a valuable tool in the performance arsenal.&lt;/p&gt;
&lt;p&gt;Under Puppeteer, of course, is &lt;a href="https://element.flood.io/"&gt;Element&lt;/a&gt;— our load-flavored version of Puppeteer.&lt;/p&gt;
&lt;p&gt;&lt;img src="https://nicolevanderhoeven.com/assets/20200423-06.png" alt="" loading="lazy" decoding="async"&gt;
&lt;/p&gt;
&lt;h2 id="is-protocol-based-load-testing-dead"&gt;Is protocol-based load testing dead?&lt;/h2&gt;
&lt;p&gt;No. Testing on the protocol-level may have its drawbacks, but it&amp;rsquo;s popular for a reason. If you&amp;rsquo;re testing mobile apps or API endpoints, protocol-level testing tools allow you to focus on hitting what you want to test and only what you want to test. Sometimes you don&amp;rsquo;t want to test the whole stack. It really depends on your test scenarios.&lt;/p&gt;
&lt;p&gt;Plus, protocol-level tools tend to be really resource efficient. We&amp;rsquo;ve been able to easily run about 1000 users per Flood node with JMeter and Gatling, easily outstripping browser-level tools. It makes sense, since JMeter and Gatling don&amp;rsquo;t need to start browser instances to generate load.&lt;/p&gt;
&lt;p&gt;It&amp;rsquo;s significantly cheaper to generate very high loads with protocol-level tools. This efficiency makes protocol-level tools a good choice for high concurrency load testing and especially stress testing.&lt;/p&gt;
&lt;h2 id="what-are-we-doing-to-support-blu"&gt;What are we doing to support BLU?&lt;/h2&gt;
&lt;p&gt;Clearly, our usage metrics show that browser-based load testing is on the rise, and we&amp;rsquo;re planning to ramp up our offerings in this area while also maintaining support for protocol-level tools. Here&amp;rsquo;s what you can look forward to from us:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;New releases
&lt;ul&gt;
&lt;li&gt;We just released &lt;a href="https://element.flood.io/docs/1.0/install"&gt;version 1.2.3 of Element&lt;/a&gt; a few weeks ago, which addresses some bugs and improve stability for certain actions.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Dedicated Element team
&lt;ul&gt;
&lt;li&gt;We&amp;rsquo;ve put together a team of developers who will be focusing on improving Element exclusively. Despite Element being an open source tool, we&amp;rsquo;re putting our own resources behind it to improve it faster.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Partnering with consulting services
&lt;ul&gt;
&lt;li&gt;It can be difficult to get started on a new tool, and Element is no exception. While we provide a load testing platform to run Element scripts, some companies want help to create the scripts in the first place. To this end, we&amp;rsquo;ve partnered with expert consultants who have already been using Element with great success: &lt;a href="https://foulkconsulting.com/"&gt;Foulk Consulting&lt;/a&gt; and &lt;a href="https://www.planittesting.com/"&gt;Planit Testing&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="conclusion"&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;When choosing a performance testing tool, it&amp;rsquo;s important to consider the advantages and disadvantages of protocol-level and browser-level testing tools. We think both types of tools deserve to be in a solid performance and load testing strategy. They can also be used in tandem in a hybrid load testing approach, improving overall application performance and scalability.&lt;/p&gt;
&lt;p&gt;In 2018, we predicted that testing web-based applications with real browsers would increase in popularity, so we&amp;rsquo;re thrilled to see our theory validated in 2020. Browser-based load testing is increasing in usage, and our open source tool, Element, is leading the charge. It&amp;rsquo;s exciting to be at the forefront of this revolution, and we intend to increase support for load testing with real browsers even more this year.&lt;/p&gt;</description></item><item><title>Ask a Flooder 12: Puppeteer vs Selenium: which one is better for load testing?</title><link>https://nicolevanderhoeven.com/blog/20200421-aaf12/</link><pubDate>Tue, 21 Apr 2020 17:36:28 +0100</pubDate><guid>https://nicolevanderhoeven.com/blog/20200421-aaf12/</guid><description>
&lt;link rel="canonical" href="https://www.flood.io/blog/ask-a-flooder-12-puppeteer-vs-selenium-which-one-is-better-for-load-testing"&gt;
&lt;p&gt;&lt;em&gt;Originally posted &lt;a href="https://www.flood.io/blog/ask-a-flooder-12-puppeteer-vs-selenium-which-one-is-better-for-load-testing"&gt;here&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;When it comes to software testing, the debate of Puppeteer vs Selenium is a hot one. Nicole tackles it here to determine which one is better for load testing in particular. Spoiler: The answer is still &amp;ldquo;it depends&amp;rdquo;.&lt;/p&gt;
&lt;div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"&gt;
&lt;iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/K61W7ivhsuE?autoplay=0&amp;amp;controls=1&amp;amp;end=0&amp;amp;loop=0&amp;amp;mute=0&amp;amp;start=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="YouTube video"&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;p&gt;Or catch the audio version here:&lt;/p&gt;
&lt;iframe src="https://open.spotify.com/embed-podcast/episode/76u25lI7sFx5SwgbsFLU5Z" width="100%" height="232" frameborder="0" allowtransparency="true" allow="encrypted-media"&gt;&lt;/iframe&gt;
&lt;p&gt;Hi everyone, Nicole here again, back for another Ask a Flooder, and today, the question is: &amp;ldquo;Puppeteer vs. Selenium: which one is better for load testing?&amp;rdquo;&lt;/p&gt;
&lt;p&gt;We&amp;rsquo;re actually getting this quite a bit now as Puppeteer grows in popularity, but first, let&amp;rsquo;s discuss the similarities. They&amp;rsquo;re tools that you can use to drive browsers. The work by identifying and interacting with elements on a website in the same way that a user would. They are also both open-source, and both can be used for load testing. This is a great strategy because instead of writing tests for an automation suite and then tests for load testing, you can just write the one test suite and re-use it, so it saves a lot of resources in the end. To answer this question, I&amp;rsquo;m going to focus on load testing because that&amp;rsquo;s what my experience is in.&lt;/p&gt;
&lt;h2 id="difference-between-selenium-and-puppeteer"&gt;Difference between Selenium and Puppeteer&lt;/h2&gt;
&lt;h3 id="pros-and-cons-of-selenium"&gt;Pros and cons of Selenium&lt;/h3&gt;
&lt;p&gt;Now for the difference. Selenium supports more browsers than does Puppeteer. It supports Chrome, Firefox, IE, Safari, and Opera, so there are a lot more options to choose from depending on your application.&lt;/p&gt;
&lt;p&gt;Selenium is also what I would call automation-first. It was built with automation in mind, which means it&amp;rsquo;s very good at that. It&amp;rsquo;s very robust, and if you have a complicated test scenario, Selenium is an excellent choice.&lt;/p&gt;
&lt;p&gt;It&amp;rsquo;s also been around for much longer than Puppeteer, which is important because that means it&amp;rsquo;s had more time to build up a community. There are way more resources and tutorials for Selenium than for Puppeteer.&lt;/p&gt;
&lt;p&gt;It&amp;rsquo;s also, unfortunately, very resource-intensive. That&amp;rsquo;s not something that you would typically care too much about from a test automation perspective, but when you&amp;rsquo;re running thousands of users on the cloud, it IS important to keep in mind that Selenium, just because of how it&amp;rsquo;s built and its complexity, can only run about five users per node. We&amp;rsquo;ve found that out at Flood, after baselining specifically an AWS m5.xlarge instance. So you can look at the specs of that and compare it with the machines that you&amp;rsquo;re wanting to run Selenium on, to see how that would equate for you.&lt;/p&gt;
&lt;h3 id="pros-and-cons-of-puppeteer"&gt;Pros and cons of Puppeteer&lt;/h3&gt;
&lt;p&gt;Puppeteer is a NodeJS library developed by Google, which means it plays very well with Chrome. There are a whole lot of things that you have access to with Puppeteer, and if you&amp;rsquo;re using it with Chrome, pretty much anything in Chrome, including rendering times, you can see and access with a Puppeteer script. So that&amp;rsquo;s a huge advantage.&lt;/p&gt;
&lt;p&gt;Unfortunately, that also means it supports fewer browsers. Obviously, it supports Chrome very well, and they recently came out with support for Firefox, although they do have plans to incorporate support for more browsers in the future.&lt;/p&gt;
&lt;p&gt;One of Puppeteer&amp;rsquo;s advantages is that we at Flood actually created a tool on top of Puppeteer. It&amp;rsquo;s also open-source. It&amp;rsquo;s called Flood Element, and Element is built to be performance-first because obviously, that&amp;rsquo;s what we had in mind when we were building it. It takes everything that&amp;rsquo;s good about Puppeteer and makes it really easy to set parameters that you normally would expect to need for load testing, like users and ramp-up.&lt;/p&gt;
&lt;p&gt;This also means that it&amp;rsquo;s way less resource-intensive. I said that with Selenium, you can run up to five users on an AWS m5.xlarge instance, and for the same instance type, you can run, from our experiments, anywhere from 30-50 Element scripts/users. That is a huge saving when you&amp;rsquo;re running a really large-scale test.&lt;/p&gt;
&lt;h2 id="should-you-choose-selenium-or-puppeteer-for-load-testing"&gt;Should you choose Selenium or Puppeteer for load testing?&lt;/h2&gt;
&lt;p&gt;I would say that if you already have a large Selenium automation suite, if you have a complex test scenario, or if you aren&amp;rsquo;t running that many users for your load test, then Selenium is a great choice. If you ARE running thousands of users, though, and resource efficiency, and therefore cost efficiency, is really important to you, then choose Element.&lt;/p&gt;
&lt;p&gt;My advice is always to try both. If you have the time, do a proof of concept with both of them. That way, your whole team can better understand what the pros and cons are for each one and decide which one is best going forward. Or maybe you don&amp;rsquo;t even decide on one. At Flood, we support both of them at the same price, so it depends on what you prefer.&lt;/p&gt;
&lt;p&gt;Until next time, happy flooding!&lt;/p&gt;</description></item><item><title>Ask a Flooder 05: How do I get started with Flood Element?</title><link>https://nicolevanderhoeven.com/blog/20200317-aaf05/</link><pubDate>Tue, 17 Mar 2020 20:58:12 +0100</pubDate><guid>https://nicolevanderhoeven.com/blog/20200317-aaf05/</guid><description>
&lt;link rel="canonical" href="https://www.flood.io/blog/ask-a-flooder-05-how-do-i-get-started-with-flood-element-video"&gt;
&lt;p&gt;&lt;em&gt;Originally posted &lt;a href="https://www.flood.io/blog/ask-a-flooder-05-how-do-i-get-started-with-flood-element-video"&gt;here&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;On this Ask a Flooder, I talk about getting started with Flood Element. Element is an open-source tool that is a good Selenium alternative for browser-based load testing. It runs Puppeteer under the hood to drive real browsers at scale and can be paired with Flood for cloud load testing.&lt;/p&gt;
&lt;p&gt;‍&lt;div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"&gt;
&lt;iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/oWtnStKrh98?autoplay=0&amp;amp;controls=1&amp;amp;end=0&amp;amp;loop=0&amp;amp;mute=0&amp;amp;start=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="YouTube video"&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/p&gt;
&lt;p&gt;TRANSCRIPT:&lt;/p&gt;
&lt;p&gt;If you&amp;rsquo;re sold on browser-based load testing and want to get started on Element, I think the easiest way to do that is by going to &lt;a href="http://element.flood.io"&gt;element.flood.io&lt;/a&gt; and clicking on Install on the upper left corner. You can follow those instructions to get started, and you can also click on the links on the left side if you get stuck.&lt;/p&gt;
&lt;p&gt;Once Element is installed, open up the directory and look at the examples folder. There you&amp;rsquo;ll find a lot of sample scripts that we&amp;rsquo;ve already made up for you. The easiest way to get started is to just modify some of these slightly so that you&amp;rsquo;re testing your site. For example, you could just change the URL and step names to make it appropriate for what you&amp;rsquo;re testing.&lt;/p&gt;
&lt;p&gt;Then, you can run it locally using the command element run the name of your test script, like test.ts, and then I also like to include the no-headless flag.&lt;/p&gt;
&lt;p&gt;&lt;code&gt;element run test.ts --no-headless&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;The no-headless flag is going to run a real browser, a Chromium browser, on your machine, so that you can see what the script is actually doing. This is a great way to debug and troubleshoot.&lt;/p&gt;
&lt;p&gt;Once you&amp;rsquo;re ready to run your load test on the cloud, you can simply drag and drop your Element script into the Flood stream editor and then start your load test as usual.&lt;/p&gt;
&lt;p&gt;Check out the links in the description below for more information about Element, how to get started, and how to run an Element script on Flood.&lt;/p&gt;
&lt;p&gt;&lt;a href="https://element.flood.io/"&gt;More about Element&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://guides.flood.io/scripting-and-tools/flood-element/getting-started-with-element"&gt;Getting started with Element&lt;/a&gt;&lt;/p&gt;</description></item></channel></rss>