React Summit

React Summit 2023

Over the last few years, there has been a great focus on shifting tests left to earlier in the software development cycle. It's great that the emergence of trends such as e2e testing has enabled us to validate the user workflow earlier. However, they do not eliminate the need to monitor this workflow against a live production system. I have seen that the segregation of development and support teams leads to both teams using different tools to build similar automation that simply targets different environments of the same software. By joining forces, we can build automated scripts that can be used both for production monitoring and testing within CI. In this talk, I will discuss the causes of this cultural divide, and why this needs to change for us to shift user testing both left and right. Furthermore, I shall show how this can be achieved using Playwright and Elastic Synthetics and also chat through the challenges you may face shifting left and right.

Synthetic Monitoring and E2E Testing - 2 Sides of the Same Coin

Hi everyone, it's great to see you at React Summit. My name is Carly Richmond. I am a developer advocate at Elastic. And I want to talk about synthetic monitoring and end-to-end testing. You might wonder why these things might seem totally different constructs. But despite the emergence of DevOps and SRE practices and about trying to unite among custom workflows, I'm finding that for various reasons we're still using different tools to try and achieve rather similar levels of automation, albeit at different points in the development cycle. I'm going to talk about my own experiences of why I think that happens, and then I'm going to show how we can unite alongside a common tooling by using embedded end-to-end testing within a synthetic monitoring tooling to allow us to basically do both of these things using the exact same scripted journals. So I used to work in a bank before I joined Elastic. And for the majority of that time, I found dev and ops were not as joined up as we'd like to say. They were basically warring factions with competing interests. And the emerging best practices from SRE and DevOps coming through the observability space often were picked up by production management, but it never really permeated back very easily into the developer side of the fest. And it took a lot of convincing for that to happen. And I honestly think that stemmed from three key reasons that sadly I think still exist in some way today. The first is that we often have dev and SRE as separate departments or separate teams rather than being part as one multidiscipline team. And with the separate departments, with competing agendas, lack of communication and empathy tends to build up, which can be a big problem. Because it causes each group to feel like when someone comes with an idea of how to collaborate together, that we're throwing things over the fence for the other to pick up and break the flow and basically call into question the direction in which we knew we were meant to build as a developer or as an SRE. The second is often that there isn't a common prioritization between these two groups. SRE can often find minor defects or have ideas for automation or enhancements to the application ecosystem. But quite often, those are deprioritized. And instead, you'll have a product owner pushing for new features for users that developers will happily be going away to build. And we don't ever address this balance. And the final challenge that I've seen firsthand as well is that often development production teams are using different tooling to achieve similar objectives. So in my last role at the bank, we were actively using Cypress for developing end-to-end tests. Meanwhile, colleagues in SRE were writing similar automations in Selenium because it integrated into their observability platform. And they could use it for periodic monitoring and checks against the production application. And it meant that we couldn't really use the end-to-end tests in production without either of us switching to a new tooling. And the reality is that end-to-end testing, using automation frameworks to validate the user journey through automated tests, and synthetic monitoring where we run periodic scripts to either check the accessibility or endpoints or the achievability of user behavior to make sure it's still operating correctly, are effectively two sides of the same coin. And if we unite amongst a common tooling, we can end up using these same scripts not only as testing and monitoring tools in the same application suites across different environments, but we can also use them as a common way of documenting the user journey and how we expect users to use our application features. So using Playwright and Elastic Synthetics, we can do that. So the way that this works, as you'll see in gray, going through each of the boxes, is that we'll have JavaScript and TypeScript journey files that will basically utilize Playwright to automate those interactions and run locally as end-to-end tests against a locally running web app. Then through peer review, we can run the same monitors as end-to-end tests within the GitHub Actions CI pipeline or any other CI provider that you're using. As we get to deployment stage of our app, we can then push these same monitors using our own API key into the appropriate location, either the Elastic specific location or our own running private location, to do the monitoring instead against the production web application, which will then store the results within Elasticsearch and make available the dashboards in Kibana so that we can actually see what's going on. So how do we get started with this? Well, you need to create a project to house these monitors so that they can be maintained within source control using from both parties. The easiest way to do that is using the init wizard after installing the Elastic Synthetics Playwright wrapper via NPM. It'll give you a sample project structure looking like this, which will include Synthetics configs for the specific configuration for the project and some example monitors, including the TypeScript journeys that you can see there under the journeys folder. We then are able to write our own behavioral tests building on the examples using Elastic Synthetics. You'll see here on the top that the page object, which is the Playwright page object, is exposed within our journey and also within each stack. And we can make use of the Playwright API to do things like locate elements via CSS selector, which you can see on line 16, by the various helper attributes introduced in versions 2.17 and later, such as get by test ID. We can perform clicks and actions that a user would against these appropriate HTML elements, and then we can perform various assertions to see that the appropriate result is showing there. And then we can run these locally and make sure that all of the changes associated with their new feature are passed. We can then run the same things within our CI pipelines as well. And then we can push those same definitions to production to the Elastic Synthetics location, which will allow you to run those same tests as monitors against your production application. Then SRE audiences can monitor the state. They can see the basic pings. They can see, as highlighted in the background of these cards, what the duration has been over time using the chart in the background. And then when things go wrong, we can actually see the individual steps. We can see what particular expectations or errors happened. And we can then do smart things like have alerts or anomaly detections to try and pick up if there's perhaps a degradation in performance if these particular tests are taking longer as per our trends. So for me, DevOps is always meant to be about bringing the dev and the SRE factions together. We need to leave that cultural baggage behind that's been sitting for so long and work together. And if we use a common tool, there's some great benefits to be afforded in terms of documenting the user journey, collaborating together to pick up defects in testing and in production, and just generally building better applications for users. So thank you so much. It's been great speaking here at React Summit. Hopefully I get to catch you around the conference. And if not, feel free to check out the code example on the QR code on the screen. Or you can also contact me with any questions at Carly L. Richmond as well. Bye!


Carly Richmond

We're bringing free articles, videos, courses, and tutorials to help you learn all about ReactJS, whether you're a beginner or a pro. Introduced in 2011, the framework has become essential for web and mobile developers alike, enabling modern apps by look and function. And while other JS tools have expanded or revised its original notions, React's popularity is still the one to beat.

React is a powerful JavaScript library for building user interfaces. Learn more about React with our comprehensive talks, workshops, tutorials and presentations. Our experts will help you understand the fundamentals of React, as well as advanced concepts such as state management, routing, performance optimization and more. With our resources, you’ll be able to create stunning web applications with React and take your development skills to the next level.

React Talks, Workshops, Tutorials and Presentations for JavaScript Developers

Testing is a crucial albeit difficult part of software delivery. Make sure your JavaScript apps are always spotless with the following compilation of free online tutorials, courses, and talks from our conferences. They'll take you on a journey from basics to advanced methods and even philosophical questions about testing.

This page contains talks, workshops, tutorials and presentations about testing for JavaScript developers. Learn the best practices of testing code, how to design tests that are most effective, and how to debug problems in your code. Discover how to use automated testing tools, such as Jest and Mocha, to make sure your code is working correctly. Get answers to your questions on topics like unit testing, integration testing, end-to-end testing, and more. With these resources, you can become an expert in testing JavaScript code.

Testing Talks, Workshops, Tutorials, and Presentations for JavaScript Developers

Did you know that TypeScript lets you write JavaScript the way you really want to? Explore the variety of Typescript courses we compiled from our speakers and collaborators and find out what you can do with this language and how it improves the development experience.

This page contains talks, workshops, tutorials and presentations about Typescript. Learn from experienced JavaScript developers how to get started with Typescript and how to use it in your projects. Get the latest tips and tricks for coding with Typescript and find out how to optimize your code for maximum performance. Discover how to create efficient and maintainable applications with Typescript and take your development skills to the next level.

Learn Typescript: Talks, Workshops, Tutorials & Presentations for JavaScript Developers

Feeling like boosting up your career? In this section, you'll find free JavaScript courses, tutorials, and coding lessons to help you stay up-to-date with the latest developments in the JS ecosystem and take you from basic to advanced. Dive into it, and you'll find out that the world's most popular programming language is easy to learn.

Welcome to the JavaScript Learning Portal! Here you will find a variety of talks, workshops, tutorials and presentations about JavaScript. Whether youre a beginner looking to learn the basics or an experienced developer looking to stay up-to-date on the latest trends in the language, this portal has something for everyone. We have organized our content into different categories so you can easily find what you need. Explore our selection of talks, workshops, tutorials and presentations today and start learning more about JavaScript!

JavaScript Talks, Workshops, Tutorials & Presentations - Learn JavaScript from the Experts!

JS tooling is a term used to describe the tools and processes used to develop applications in JavaScript. This includes frameworks, libraries, build systems, task runners, and other tools that help developers create, test, and deploy their applications. We have talks and workshops on this topic to help students learn how to use these tools effectively and efficiently.

This page contains talks, workshops, tutorials and presentations about js tooling - the most up-to-date JavaScript tools and techniques for developers. Learn how to set up a JavaScript development environment, create custom scripts and build applications with the latest technologies. Discover the best practices for using popular tools like Gulp, Grunt, Webpack, Babel and more. Get tips on debugging and troubleshooting common problems. Whether you are a beginner or an experienced developer, these resources will help you get the most out of your JavaScript tooling.

Exploring JS Tooling: Talks, Workshops, Tutorials and Presentations

Web development is the process of creating websites, applications and other online services. It involves a combination of coding languages such as HTML, CSS, JavaScript and others to create an interactive user experience. The goal of web development is to create a website or application that is fast, secure, and easy to use. Web developers must understand how to design, build and maintain websites while also considering the user experience and making sure the code is optimized for performance.

The page contains talks, workshops, tutorials and presentations about web development for JavaScript developers. Learn the fundamentals of web development and use JavaScript to create dynamic and interactive websites. Our experts will guide you through the process from the basics of HTML and CSS to more advanced topics such as AJAX, jQuery, and Node.js. Get the skills you need to become a successful web developer and take your career to the next level.

Web Development Talks, Workshops, Tutorials, and Presentations

Fullstack is a term used to describe a developer who is knowledgeable in every layer of web development. This includes the front-end (client side) code such as HTML, CSS, and JavaScript, as well as the back-end (server side) code such as databases, server-side languages, and APIs. A fullstack developer can develop entire web applications from start to finish, including database design, user interface design, and coding.

Fullstack can be a daunting concept for JavaScript developers, but it doesnt have to be. Our collection of talks, workshops, tutorials, and presentations will help you understand the fundamentals of fullstack development, so you can start building powerful applications quickly and efficiently. With our comprehensive resources, youll learn how to use both backend and frontend technologies to create modern web apps, mobile apps, and more. Whether youre just getting started or looking to take your skills to the next level, our fullstack content will give you the knowledge and confidence you need to succeed.

Fullstack Talks, Workshops, Tutorials and Presentations for JavaScript Developers

DevOps is a set of practices that combines software development (Dev) and information-technology operations (Ops). It is an approach to software development that emphasizes collaboration, communication, and automation between developers and IT professionals. DevOps is focused on automating processes to enable rapid deployment and continuous integration of applications, while also providing visibility into the entire system. This helps to ensure that the application meets customer expectations and is able to quickly adapt to changing business needs.

DevOps is a set of practices that combine software development and IT operations to shorten the systems development life cycle while delivering features, fixes, and updates frequently in close alignment with business objectives. This page contains talks, workshops, tutorials, and presentations about DevOps, which is a way of working that helps developers and operations teams collaborate better to deliver software faster and more reliably. Learn how to optimize your development workflow, increase collaboration between teams, and improve the quality of your applications with DevOps.

DevOps Talks, Workshops, Tutorials and Presentations for JavaScript Developers

Frontend refers to the part of a website or application that users interact with. It is typically built using HTML, CSS and JavaScript to create an interface that allows users to view and interact with content. Frontend developers are responsible for creating the visual elements of a website or application, such as layout, styling, animation, and user interaction. This includes designing how a page looks, how it responds to different events, and how it interacts with the user.

The page contains talks, workshops, tutorials and presentations about frontend and is designed for JavaScript developers looking to improve their knowledge and skills in this area. Here you can find the latest insights, tools and techniques to help you stay up-to-date with the ever-changing frontend landscape. Whether youre a beginner or an experienced developer, youll find something to help you become a better frontend engineer.