Static Web Apps demo – CI/CD, Deployment and Test Pipeline on Azure

Rate this content

A real-world demo and a playground for Azure Static Web Apps service.

50 min
25 Nov, 2021


Sign in or register to post your comment.

AI Generated Video Summary

This workshop provides insights into engineering at Microsoft, highlighting the company's culture of curiosity, learning, and customer focus. It discusses the use of hackathons to generate ideas and overcome challenges in building large-scale products. The workshop also covers technical resources and tutorials on Azure Static Web Apps and Playwright testing framework. It emphasizes the flexibility and powerful features of Playwright for testing and code reuse. The session concludes with information about open positions at Microsoft.

1. Introduction to Engineering at Microsoft

Short description:

I'm an engineering manager at Microsoft Ireland, and I'll be sharing my personal view and experience on engineering at Microsoft. Microsoft has a long history of building products adopted worldwide. We work on products that make a difference for thousands of organizations and people. Our culture encourages curiosity, learning, and taking risks. We prioritize understanding our customers' needs and embrace diversity and inclusion. We believe everyone should be a leader and contribute to our culture and product development. Our yearly hackathon events promote a growth mindset.

Hello, everybody. Please allow me to introduce myself. My name is Vanya Lebedev and I'm an engineering manager with the Dynamics 365 supply chain manager team at Microsoft Ireland. I have been working at Microsoft for over 12 years, first as a software engineer, and then as a manager, and I'm super thrilled about the opportunity to join the TESTJS summit today and to talk about engineering at Microsoft. So I will be sharing my personal view, perspective and experience on the topic.

I will dive into why I find Microsoft special and what kept me going for this 12 years. I will talk about the engineering challenges that my team is currently solving and about the engineering opportunities in the team. So I hope you will find it interesting. So, let's get started.

Everyone knows Microsoft. We have a long history of building products that got adopted all around the world. And this is probably the main reason why I joined the company back in 2009. It was a fantastic opportunity to learn what it's like to work in one of the most famous companies in the world. So I joined and never regretted. The engineering challenges for sure have been exciting so far and I've been having a really great time in the process of solving them.

One of the best things for me personally is that I've been working on products that are truly needed that make a difference for thousands of organizations around the world and for hundreds of thousands of people in these organizations. Our CEO, Satchin Adella, has expressed this ambition in the mission statement that you see on the screen right now. We want to empower every person and every organization on the planet to achieve more. This statement excites me personally very much, specifically because of the ambition, because of the scope of this vision. Think about it. It's every person on the planet. This is the scope of the reach that we are trying to achieve. This is a truly global endeavor.

And you know what? Having a great goal is great, but another thing that really, really inspires me, really gets me going is that not only do we have a vision of where we are going, but we also have a clear understanding of how we will be getting there. One smart man said that culture is strategy for breakfast. And it's very true. I think that it is the people around me and the culture that we all share that is and will be the cornerstone of Microsoft's success.

Everyone in the company, everyone around me is encouraged to always be curious, eager to learn, to take risks. And another thing that's really great is that everyone is also encouraged to not be afraid of making mistakes along the way. Because if you don't make mistakes, if you don't take risks, we will not make a difference. However, if we do make the mistakes, we will learn, we will get better and we will create a revolutionary software. So this is the culture. These are the messages that are really resonating with me.

And as part of this growth mindset, we are also trying to get obsessed with the customers, to get out of our way of understanding what their real needs are. We will not assume that we have learned everything. We know everything, but we will keep learning and learning and learning about them. Ultimately, creating better products and making a difference. Same goes for diversity and inclusion. We are a team which is so global, you cannot imagine. People from around the world with all different backgrounds, genders, etc. are very welcome on the team, and everyone brings a unique perspective.

There were so many examples in my career where their opinions and ideas helped us to produce better software and products, and ultimately succeed. This is something that I think is very unique and very inspiring about my work. This is why I keep going. Another thing that really stands out to me about about work at Microsoft is that the culture like this, the culture that I was just describing, does not come up on its own, does not emerge on its own. It requires a strong vision and strong leadership and collective effort and to accelerate our culture we have introduced this vision of what are the great leaders in the organization and we believe that everyone, every engineer, every person in the org should be a leader, otherwise we will not be able to progress as fast as we want to, we will not be able to shape our culture, we will not be able to build the products that we need, and it's really great when people start adopting this mindset, this is something that really helps us to get things done, people do not sit in the corner and complain, everyone takes their fate in their hands and makes a difference, makes a change, this really helps driving great, healthy, efficient engineering organisation, so this is something I really like.

It was a lot of words, but what about some concrete examples, I think one great example of how Microsoft is promoting this growth mindset are the yearly hackathon events. For three days, everyone in the org, every engineer in the org just goes in a completely dark mode with pizzas and everything to hack their ideas and produce code applications, improvements that they have been thinking about for a long time. Let's have a quick look at the recording of what can be achieved. Yep.

2. Hackathons and Engineering Challenges

Short description:

Hackathons have been an amazing experience for me, generating great ideas and fostering a strong team dynamic. Our team focuses on supply chain management applications for enterprises, covering various areas such as sales, procurement, manufacturing, and more. Building such a large-scale product requires a team of thousands of engineers. We face challenges in performance, scalability, integration, and user experience. Fortunately, we leverage the Microsoft Cloud and cutting-edge technology like Power Apps and microservice architecture to overcome these challenges.

So this is what can be achieved with hackathons. I personally have been participating for the last five years. Every time, it was an amazing experience, and we always came up with great ideas and had an amazing time doing this. Again, it was a lot of words and a lot of cultural things, but we are all engineers here.

You're probably curious, okay, what are the engineering challenges. What is your team doing? So our team is bringing supply chain management applications to enterprises. We are focusing on the business applications side of things, and this is a small slide, which shows what kind of areas we are covering. So our applications cover sales, procurement, manufacturing, cost accounting, supply and demand planning, warehousing, transportation, finance, tax. You can see on the slide, just reading the titles of the applications that comprise the suite of our products is immense. And if you think about the size of the product, it's tens of thousands of types of persistent entities. It's hundreds of thousands of classes, millions of automated tests.

The team that is needed to build software like this is a few thousand people, a few thousand engineers. Naturally, my team is responsible for a smaller piece of this application. Primarily, we are focusing on intelligent order management, on field service and on supply chain planning capabilities. But the engineering challenges are many. So we are targeting upper-mid-size to global enterprise companies. And with a company size like this, performance and scalability requirements are insanely hard to meet. Another interesting challenge is how do we integrate so many applications into a suite that would have a seamless look and feel and would be integrated seamlessly to give the users an easy and efficient experience. And, of course, the user experience itself. So how do we make this application as delightful as possible? So, luckily, we are tapping into the power of the Microsoft Cloud to build this suite of applications, and we are using the latest and the greatest technology to achieve this. Power Apps is the platform that sets up the framework for our development. We are also embracing the microservice architecture as a means of scaling out independently, releasing independently, making sure that our...

3. Azure Developer Engagement Lead and Labs

Short description:

My name is Juarez Barbosa, Jr. I am the Azure developer engagement lead in Microsoft. I have 25 years of experience in IT, with a focus on cloud, DevOps, Java, JavaScript, Golang, IoT, mobile, and blockchain. We have prepared technical resources for you today, including labs on Azure Static Web Apps and Playwright testing framework. We also have a Twitter channel, Microsoft Developers Ireland, where we share upcoming events and rich content. The agenda includes a presentation on software engineering at Microsoft, followed by demos of Azure Static Web Apps and Playwright. I will guide you through the steps, and you can follow along. Let's start with the tutorial on Azure Static Web Apps, where I have summarized the steps for you. We will cover the prerequisites, creating a Git repo, and cloning the REPL locally.

My name is Juarez Barbosa, Jr. I am the Azure developer engagement lead in Microsoft. Here you can see my contact details, you know, my media channel, also Twitter handle and my LinkedIn profile. So, in case you want to, I would say, ask me questions after the workshop today, feel free to approach me.

So, without further ado, let's start. Just to talk a little bit about my profile, I have 25 years of experience in IT in several different roles. In engineering, as a software architect, solutions architect, you know, and 10 years in developer relations, developer community, advocacy, and marketing. In the past, I acted as a Nokia developer's champion and community member, also an evangelist for IBM mobile and the Global Thought Lead for their mobile platform. I've worked for IBM also, concerning the IBM Cloud and the Cloud Group, and also as a Watson evangelist and as the technical workstar for Europe, and also Oracle in EMEA, concerning the developer relations team, and now Microsoft in Nylon. Lately, I've been focusing on cloud, DevOps, Java, which is my primary programming language somehow, but also JavaScript, Golang, IoT, mobile, and also blockchain, okay?

So let's talk a little bit about the opportunity here. We prepared some technical resources for you today, so I'm going to give you, I would say, some time to scan this QR code or visit this HackaMS link here. Where you can find all the resources related to one of our labs today, okay? We are talking about Azure Static Web Apps and also testing with Playwright, which is an open-source framework created by Microsoft. So please scan this QR code in case you are interested in learning more about the technical content here. And also we have a channel on Twitter, Microsoft Developers Ireland, and there we post about the upcoming events and also the rich content that we have in Microsoft, some free courses that are available as part of Microsoft Learn and so on.

Talking a little bit about the agenda then, we started with Venya with a presentation about software engineering at Microsoft. Then we'll have a quick demo now. I'm gonna, I would say, perform all the steps concerning the couple of labs that we have today. I'm gonna start now with the one related to Azure Static Web Apps, OK? Including continuous integration and delivery. Also build, deployment, GitHub Actions, everything. And then we'll have a quick intro lab about Playwright as well, which is somehow, I would say, based on JST, JS, the testing library, you know. But there are some extensions, so we are going to talk about that shortly. So, without further ado, let's start, OK? So, yes, I have my VS Code open here. Let me show you the first lab, and I'm gonna share that on the IAM window so you can have a look as well, OK? But I'll give you time to complete the tasks, so if you don't mind, let's try to follow the activities here first, OK?

This is the tutorial about Azure Static Web Apps. Actually, a blog post. I summarized all the steps, you know, so you don't have to go through all the extensive documentation that we have. The first thing here, we have some prereqs, OK? So, I'm going to give you perhaps 15 minutes or so to install all the tools, but you don't have to do that now because I have them installed here for you. So, I can just walk you through the steps and everything, but you'll have, I would say, plenty of time to address the prereqs as well, OK? We'll need GitHub account, we'll need an extension for Visual Studio Code that's specific to Azure SWA, an Azure account and you can, in case you don't have one, you can create a free account with us, OK? Visual Studio Code, OK, that's the IDE, at least the one that I'm going to use here today, but of course you can use your preferred one. It's easy to adapt it. There is nothing specific to the VS Code here apart from the extension. Also, Git, of course, OK? So, the first step here is to create a Git repo, OK? So, we can actually host the sample code. Actually, the code here, there's nothing elaborated here, just a simple web page and a CSS file, OK, but you can then visit this URL here and provide a name for your project, and I have mine created here somewhere. Let me show you. OK, let me close this, this, this, and this. I think it is here. Sorry. OK, so this is the REPL, OK, actually the GitHub Action, but you can see the REPL here. It is a simple one, OK, with a source folder and a couple of files, as I said. OK. Let's go back. After that, of course, you create a REPL, OK, for the SWA application. We'll have the REPL created, as you can see. OK. As I said, not, I would say, a full-fledged project, you know, so just a simple example, because the focus here, of course, I advocate for Azure, so I want to show you how easy it is to create a static web app and apply that to Azure, you know, with a few steps and also have a CI, CD, you know, GitHub Actions and everything else as part of that. OK. We have to clone the REPL, of course, locally. OK, so remember to replace your GitHub account name here. OK, and I have mine here. OK, so I started CMD, and then I would say navigate to the right directory, and then I can clone the REPL story. I have it here open for you, and you can see the same source code here with the pop-up files, right? Hello, you have stopped sharing your screen. Oh, sorry.

4. Creating a Static Web App

Short description:

I talked about the remote REPL and creating a static web app. You need to authenticate against Azure, select the SWA section, provide a name for the app, select the cloud region, choose the custom framework, provide the source code directory, and start the deployment phase.

Oh my God. What happened here? OK, cool. Thank you so much. Yeah, let me go back here then. Yes, I talked about the remote REPL, OK, that we need to complete the task here. Also, you can see it here after I created it, OK? We have just a single file. Of course, you have to create a local directory and then clone the REPL, OK? I have the tabs here for you. You can see mine here, OK, with a couple of files as well.

And then after that, we can start and create the static web app, OK? So let's go to VS Code here. I have the project here, of course. OK, first thing you have to authenticate against Azure. OK, so you can see this icon here, Azure. And then you can click it. You'll see that actually mine is already authenticated here because my subscription is here. OK, but it's an easy step. And I have, I would say, all the screenshots and everything here for you. OK, you click here and then you authenticate against it and then you have it authenticated, OK?

Second step then... I have to create a static web app. So you select this specific section here, SWA. OK, and then you click the plus sign, right? And then you have to provide a name for your static web app because this one here, now, I'm going to deploy that to Azure, OK? With a few steps. So I'm going to keep the same name here. And just to mention, let me show you, I have my... I'm not so... Let me see if I can... Maybe this one here? No. No. Yes, OK. So, yes. You can see here my Azure... The Azure portal, OK? And I have nothing deployed here because there are no resource groups here. OK? And no application. I have just, I would say, a footprint here concerning the previous deployments before the workshop today because I tested everything, of course. Right? So, yes. Here is the name for my app. OK? So I can just provide it and confirm. Press enter. I select the cloud region, in my case, West Europe. OK? Again. Right? And then I can select, I would say, there are several different frameworks that you can select here, but I'm going to start with custom because it's just a plain vanilla JavaScript application. OK? And then after that, I have to provide the directory for the source code. It's actually SRC. OK? As you can see here, right? SRC here. Yes. OK. I confirm again. OK? I'm not going to create, I would say, a binary or something, a package for this deployment, so I can leave the build, the argument for build as an empty one. I click enter again and it starts the deployment phase. OK? It creates the static web app. It is now accessing GitHub. OK? And now the process is going forward.

5. Deploying the Application and Additional Resources

Short description:

There are a couple of things here. If I open this one, you will see that it is being executed as part of my GitHub actions configuration. Let's come back to VS Code. You can see that there is a resource group here now for the application. It's quite simple, indeed. You have all the steps here concerning the authentication against GitHub, selecting subscription, providing information, deployment cloud region, source code directory, and the vanilla app. There are some free courses provided by Microsoft Learn, and we have different libraries and frameworks. This is the landing page for Azure static web apps.

There are a couple of things here. I can close this one here. OK? But if I open, for example, this one here, you will see that, actually, it is being executed as part of my GitHub actions configuration. OK? It's still running here. Right? It will be marked with the green check indicator shortly.

Let's come back to VS Code. OK. It's running. We can wait a little bit more. I can have a look at my portal as well. OK? You can see that there is a resource group here now for the application. OK, let's check the status on GitHub again. Let me refresh this page here. Okay. Yeah, we'll have a notification here about the application, of course, concerning the ready status. Let's wait a little bit. Cool. OK. It's about to finish. OK, perfect. Yes, it's done. You can see here now. So I can just click browse website. OK. And you will see the application is deployed. OK, so it is as easy as that. OK, it's quite simple, indeed. So that's the first one.

OK. And you have all the steps here concerning the authentication against GitHub as I said. Also, you have to select subscription, provide all the information here. Same thing concerning deployment cloud region as I presented to you. You know the source code directory, the confirmation here. And then the vanilla app. OK. I have also some different resources here for you. Let me show you now this one, this one and this one. Yes. OK. So, yes, there are some free courses provided by Microsoft learn, you know, so I'm providing you the links here. That's the first one, you can see many things related to Azure static web apps here like this one. You know this one here, this one here, this one here you know so feel free to I would say to explore more the entire documentation is here for you as well. You know, and we have different, I would say, libraries and frameworks here. You know, we have react. We have angular we have view JS. Everything. And the last one. This is actually the landing page for delay the main landing page for this product you know Azure static web apps so you can I would say check concerning check everything concerning the service itself. OK, and there are additional pointers here. So, um, that's the first the first one, indeed, so we can start to explore the the the tutorial now.

6. Testing with Playwright and Resource Cleanup

Short description:

I'm going to give you some time to complete the steps, OK? And then after that, we'll have the one specific to testing with Playwright. Let's explore the application here a little bit. We have this resource group, as usual in Azure, to group all the resources related to your solution. Then I have the application deployed here. Let's remove this instance here and the deployment that I have removed the entire resource group. Let's wait a little bit more just to make sure that everything is cleaned up.

I'm going to give you some time to complete the steps, OK? And then after that, we'll have the one specific to testing with Playwright. All right, folks. How is it going? Are you still working on it? Um, I'm going to do something here. I'm going to share my screen again and show you the deployment on the Azure portal, providing some details, you know. And if you need, of course, I can give you a little bit more time to complete it. And I can do something as well. Perhaps, you know, I'll give you more time to have that completed, but I can start from scratch again. Okay, and do it all. So just to make sure that you understand it. Right. So, let me share my screen now again. Cool. Okay, so you can see the Azure portal here, for example. And if I check the resource group, you will see the application here. I still have it deployed here. Okay, so if I refresh it, you can see that it is still here. You can see the GitHub actions pipeline here, right, with the, I would say, successful completions. But let's explore the application here a little bit. We have this resource group, as usual in Azure, you know, to group all the resources related to your solution. Then I have the application deployed here, right. If I go to explore it, you will see the application here without any details, you know, number of requests and so on, some metrics. And of course, the URL is here, you know, primarily it is the same one. So if I copy this one here and I hit it with a cat request here, you can see, you know, basically the same reply, right. Um, okay, so let me do something now. Let's remove this instance here and the deployment that I have removed the entire resource group. Okay, so let's do it. And then I'll close my VS Code and the project as well. And then we can restart from scratch. As I said, just to make sure that you understand it, because I would love in case you can complete it. So yes, I close the folder on VS Code. I'm going to remove the resource group now. Okay, delete resource group. I provide a name here. Delete. Okay. Okay, it's running. Let's wait a little bit. And then we can try to access the application. You will see that everything is actually removed now, and then we can start from scratch. Okay. Meanwhile, please try to complete your steps there, because I understand you have to install all the dependencies. Perhaps you have different connection speeds and also different variation concerning the bandwidth, depending on where you are participating from. So yes, I'll consider that. Okay. Thank you. Right. Okay, let's wait a little bit more. Cool, not found. 404. Okay. It's still running. Let's wait a little bit more just to make sure that everything is cleaned up. Yep. Okay. Okay. Okay. Okay.

7. Creating a New Repo and Cloning

Short description:

Let's go through the steps again. Create a different repo with a new name. Clone the repo and provide your own user ID. Create a new directory for the app. Open the project in VS Code and ensure authentication against Azure.

So let's talk into it at all from scratch you know all the steps again. Okay, first thing then.

Okay, we have the pre reqs, you know the dependencies installed. Okay, so yes let's let's create a different repo now. Okay, so let me do it. Let me start this here. Let's provide a different name now, maybe. Okay I have it here. Let's let's provide. Let's consider web app to, okay. Cool. Okay, it's here for us. So now I can clone the rebel. Okay, as the second step here. Okay, you can see, it is created, so it's time to clone the rebel. So let let me adjust it. So I have, I have this git clone here. Yeah. And remember, you have to provide your own user ID here. Okay, so I'm going to modify it. Yes, static web app to. Okay, yeah. Before I have to create a new directory for this app. Okay, so let me do it. Dash two. Okay, yeah, I have it. Let me copy it here. Let me change directories here. Okay, we are ready. So now I can clone it again. Perfect.

Alright, so now I can actually I have VS code started here, but there's no full done folder open. So let's open the one that we've just created. Okay. Everything is on. Let's wait a little bit just to load the extensions and everything else. Okay, it is active activating the extensions here. Yeah, so we are performing this step here, okay? We are opening the project and then we can start to create our web app. Let me check if I'm authenticated, I think so. It's still activating the extensions, so let's wait a little bit more. OK. Cool. Yes, I'm authenticated. That's important. OK. If you're not, please follow the steps here. OK. And make sure that you can authenticate against Azure first. OK.

8. Deploying the Project

Short description:

I have the project here. Let's try to start. There's a commit step. Web app 2. West Europe. Custom. SRC. Let's wait. It is going well. GitHub action is running. Let's wait until it completes. Static Web App 2 is provisioned. Azure app service.

OK. I have the project here. OK. Yes. It seems. Yes, there are some updates happening here. But anyway, I think we can give it a try.

OK. Let me hit this one here. Minimize this one, this one. I don't need it. This one as well. Yes. And this and this. OK. So I have it here. So let's try to start.

OK. Yes. There's a commit step here. Good. OK. So this is just a plain comment. I can hit Enter here. Yes. Web app 2. That's correct. West Europe. OK. Custom. SRC. Again. Build is empty, as I explained. OK, let's wait. Hopefully that will work. Cool, yes, it is. It is going well. Let's wait a little bit more. I can open the GitHub action. Again. Yes, OK, so you can see it's running here. Let's wait a little bit until it completes. OK, I can close this one. This one as well. This one too. OK. Portal is here. If I refresh, possibly I will see, yes, we can see Static Web App 2 here. So we provisioned the service. At the end of the day, that's the Azure app service.

9. Introduction to Playwright Testing

Short description:

Azure Static Web Apps provides a high level abstraction to simplify the experience. Lab 2 is an introduction to Playwright, a testing library created by Microsoft. It is an open source framework with useful features like the Playwright specter. We will explore testing and automation using Playwright, which supports major browsers and languages like JavaScript, TypeScript, Python, .NET, and Java. Playwright offers flexibility in test execution through various configuration options.

So the Azure Static Web Apps, it provides a kind of high level abstraction on top of it to simplify the experience. OK, still running. OK, we are past this one here. OK, we are waiting for this one. Cool. It's ready. Let's go back to VS Code. OK, browse website. Yes, it worked again. Perfect. Perfect, OK, so now we'll have lab 2 and lab 2. It's about an introduction to Playwright, OK? Playwright is a testing library for many programming languages like .Net, JavaScript, Python, Java as well, created by Microsoft. OK, it is an open source framework, a very interesting one. It reuses some, I would say, elements from the library that is actually, you know, which is, of course, a testing library as well. OK, but it extends it and it has several different, I would say, features like the Playwright specter. It's quite useful indeed. So hopefully I'll be able to introduce it to this cool library. OK. And then you can start to use it. Right. OK, so let me switch screens here. Yeah, just to mention, I still have the deployment here. OK, the application, again, you will see everything is here. Same thing. The app services here with this static web app. Same you want the new URL here. OK. But we don't need it anymore. OK. So now we are going to explore testing. So there's nothing related to Azure at this moment specifically. OK, but just to show you that it's still working, but we can close the portal now. We reached this point here, as I said, in case you face issues concerning the completion. Feel free to contact me on LinkedIn later. You can see or Twitter. You can see my handle here. OK, but that's it. Let's talk testing now. OK, I can close this one as well. OK, so play right. As I said, this is a cross browser automation to OK for testing. Created by Microsoft. It's an open source on library and framework, a very cool one. You can I would say address the major browsers and the engines. You can see Chrome here, Firefox, WebKit and so on. Multiple languages, as I said, JavaScript, TypeScript as well. Interesting to mention, Python, dotnet and Java. OK, it's good for automation. There are some things here that I'm going to show you quite interesting ones related to automation. Also, you know, you can control there are several different configuration options, so you can control the way that your test is executed with flexibility, which is a nice thing.

10. Exploring Playwright Testing

Short description:

You can record a testing session, capture screenshots, create videos, and more. To get started, install Playwright and use all the supported browsers. Define a simple test by accessing the Playwright homepage, navigating elements, and checking the title content. The directory structure is straightforward, with a configuration file and a test. Run the test with NPX playwright test.

You can also record a testing session, you know, and also capture screenshots, create videos and so on. So let's explore it. First thing you have to install it. OK, it's easy. You just install Playwright first. OK, you can see the steps here. Easy one. OK, quick and easy one.

Second thing you use all the supported browsers. OK, so there is an additional NPX execution here. You can do everything from the CLI. The command line to interface. You can see the results concerning the installation here.

So the second thing now I can define a test. OK, so you can see here this is a very simple test. OK, and basically I'm just accessing, I would say the Playwright homepage. I have it here. Yes, this one. OK. And then I can navigate some elements and check, for example, the content for the title. OK, which is Playwright. OK, so I think I have it open here. Yes, I can close this one. We don't need it anymore. OK. Cool. Yes. So, yes, this is the directory you can see the structure is quite simple indeed. Let me show you here. This is just a test one, of course. So you create this after installing and everything and you start in it. You can see tests. OK. And I have a configuration file and a simple test here. Basically, the content is the same one that I showed you. You know, I have play right here and play right. OK. So I can run the first test. OK. Which is just NPX playwright test. Let's do it. OK. Test is running. Interesting. There is something wrong with my machine. OK. Yes, it passed. OK. So it is as simple as that. Right.

11. Recording Sessions and Code Generation

Short description:

Playwright provides powerful features like running in headless or headed mode, taking screenshots, and offering various options through the CLI. The inspector allows you to record sessions and automatically generates code for reuse. Let's resume the steps and learn how to record a session with NPX playwright code jam and a target URL.

But of course, it's a powerful library as well. OK. So I can I executed it in headless mode. OK. But I can also run it in a headed mode. OK. So let's do it. OK. Yeah. Here, here. And here. Yeah. So we have a browser now. Cool. Yes. OK. Yes. Completed. Yes. You have a screenshot here and same thing. OK. So now there's a way actually to and I'm providing you several different options you're concerning the CLI. So you can explore them later. Right. You can address different sets of tests. You know, you change the title run with a headed browser. You know, as I showed you now. And so on. OK. Disable parallelization as well. Choose a report or a different one in open playwright inspector. I'm going to show the inspector. You know, the inspector is nice because then you can record the session. And then after that, you can copy this content here and move it to a file, you know, so you can reuse it. It that's quite useful indeed, because actually when we start inspector and the recording, every action is recorded, of course, you know. So it creates everything for you automatically. That's quite useful. It's good for your productivity at the end of the day. But let's resume the steps they're here. OK. Yeah. Let's. Yes, let's let's let me show you how to record the session, Dan. You know, that's the next one, by the way. OK, so I can choose from an NPX play right code jam. OK. And provide a target URL. Yes. So I have the target here, you know, a browser instance. You can see it in blue here.

12. Maximizing Efficiency with Playwright and Jest

Short description:

You can record and navigate the session, copy the script to your code editor, and explore the configuration file and options. The Playwright testing library offers powerful features for testing and code reuse. You can target multiple browsers at once and configure various options. The configuration file provides flexibility in setting parameters such as workers, retries, and headless mode. You can execute the file in different modes and target specific projects. Additionally, there are links to the main project, API, GitHub repository, and YouTube channel. If there are no further questions, the session will be concluded, and the open positions at Microsoft will be shared again.

And then, yes, it is here. No. So I can hit record and then I can start to navigate and record everything. That's basically it. Yes. What else? Let me see here. Yes. OK. After that, of course, you can copy to your the the script to your preferred code editor like code assertions. As I said, you know, these library, actually we use the expect library from the just JS testing library. OK, I'm sure as a JavaScript developer, you've heard about it. You know, same one here. So somehow we are not reinventing the wheel. But of course, there are so many extensions. And, you know, in the encapsulation in terms of complexity, it's all about code reuse. But of course, we are providing you a very good tool as well. That's why we we created the project, OK? There are some samples here in terms of the sessions. But if you want to explore all the options, of course, I provided the link here as well for you. OK, so you can explore them all here. Yes, so some examples here, you know, with the weight, for example, page, go to expect first, blah, blah, blah, you know, everything is here. Configuration file and options. That's nice, you know, because, for example, you can target all the browsers at once. If you want, you know, it's quite powerful indeed. This file is a simple one, so you can just create a playwright dot config dot JS file. I'm going to open it here. Perhaps. Yes, I can use VS code. Let's try. Yes. OK, so you can see the file here, right? So with several different configuration options, you know, workers, number of retries, for example, headless. If that's a headless mode or not, you know, you can control the viewport as well. You know, you provide your target projects, you know, in that case, we are talking about browsers and some other things here. You can see Safari and Chromium here. By the way, this file is provided here as part of my blog post, you know, concerning this workshop. Yes, you can execute it the same way, right. In a headless or headed mode, configuring NPM scripts. Same thing. You can also target provide some specific targets here, you know, with the dash dash config option. And that's it. So, yes, and I have the links here concerning the main project that I showed you, but also the API, the GitHub, the respective GitHub repository and the YouTube channel. OK, so feel free to explore it. All right, folks. Any questions here or issues? If not, I'm going to draw this session to a close. I'd like to seize the opportunity again to share the open positions that we have with our teams in Microsoft, as presented by Vanya today. I'm posting the links again, so you can have a look if you check the chat here. And please also visit our channel for this workshop on Discord.

Watch more workshops on topic

React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
TestJS Summit 2022TestJS Summit 2022
146 min
How to Start With Cypress
Featured WorkshopFree
The web has evolved. Finally, testing has also. Cypress is a modern testing tool that answers the testing needs of modern web applications. It has been gaining a lot of traction in the last couple of years, gaining worldwide popularity. If you have been waiting to learn Cypress, wait no more! Filip Hric will guide you through the first steps on how to start using Cypress and set up a project on your own. The good news is, learning Cypress is incredibly easy. You'll write your first test in no time, and then you'll discover how to write a full end-to-end test for a modern web application. You'll learn the core concepts like retry-ability. Discover how to work and interact with your application and learn how to combine API and UI tests. Throughout this whole workshop, we will write code and do practical exercises. You will leave with a hands-on experience that you can translate to your own project.
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
TestJS Summit 2023TestJS Summit 2023
48 min
API Testing with Postman Workshop
In the ever-evolving landscape of software development, ensuring the reliability and functionality of APIs has become paramount. "API Testing with Postman" is a comprehensive workshop designed to equip participants with the knowledge and skills needed to excel in API testing using Postman, a powerful tool widely adopted by professionals in the field. This workshop delves into the fundamentals of API testing, progresses to advanced testing techniques, and explores automation, performance testing, and multi-protocol support, providing attendees with a holistic understanding of API testing with Postman.
1. Welcome to Postman- Explaining the Postman User Interface (UI)2. Workspace and Collections Collaboration- Understanding Workspaces and their role in collaboration- Exploring the concept of Collections for organizing and executing API requests3. Introduction to API Testing- Covering the basics of API testing and its significance4. Variable Management- Managing environment, global, and collection variables- Utilizing scripting snippets for dynamic data5. Building Testing Workflows- Creating effective testing workflows for comprehensive testing- Utilizing the Collection Runner for test execution- Introduction to Postbot for automated testing6. Advanced Testing- Contract Testing for ensuring API contracts- Using Mock Servers for effective testing- Maximizing productivity with Collection/Workspace templates- Integration Testing and Regression Testing strategies7. Automation with Postman- Leveraging the Postman CLI for automation- Scheduled Runs for regular testing- Integrating Postman into CI/CD pipelines8. Performance Testing- Demonstrating performance testing capabilities (showing the desktop client)- Synchronizing tests with VS Code for streamlined development9. Exploring Advanced Features - Working with Multiple Protocols: GraphQL, gRPC, and more
Join us for this workshop to unlock the full potential of Postman for API testing, streamline your testing processes, and enhance the quality and reliability of your software. Whether you're a beginner or an experienced tester, this workshop will equip you with the skills needed to excel in API testing with Postman.
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
TestJS Summit 2023TestJS Summit 2023
148 min
Best Practices for Writing and Debugging Cypress Tests
You probably know the story. You’ve created a couple of tests, and since you are using Cypress, you’ve done this pretty quickly. Seems like nothing is stopping you, but then – failed test. It wasn’t the app, wasn’t an error, the test was… flaky? Well yes. Test design is important no matter what tool you will use, Cypress included. The good news is that Cypress has a couple of tools behind its belt that can help you out. Join me on my workshop, where I’ll guide you away from the valley of anti-patterns into the fields of evergreen, stable tests. We’ll talk about common mistakes when writing your test as well as debug and unveil underlying problems. All with the goal of avoiding flakiness, and designing stable test.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

TestJS Summit 2021TestJS Summit 2021
33 min
Network Requests with Cypress
Whether you're testing your UI or API, Cypress gives you all the tools needed to work with and manage network requests. This intermediate-level task demonstrates how to use the cy.request and cy.intercept commands to execute, spy on, and stub network requests while testing your application in the browser. Learn how the commands work as well as use cases for each, including best practices for testing and mocking your network requests.
TestJS Summit 2021TestJS Summit 2021
38 min
Testing Pyramid Makes Little Sense, What We Can Use Instead
Featured Video
The testing pyramid - the canonical shape of tests that defined what types of tests we need to write to make sure the app works - is ... obsolete. In this presentation, Roman Sandler and Gleb Bahmutov argue what the testing shape works better for today's web applications.
TestJS Summit 2022TestJS Summit 2022
27 min
Full-Circle Testing With Cypress
Cypress has taken the world by storm by brining an easy to use tool for end to end testing. It’s capabilities have proven to be be useful for creating stable tests for frontend applications. But end to end testing is just a small part of testing efforts. What about your API? What about your components? Well, in my talk I would like to show you how we can start with end-to-end tests, go deeper with component testing and then move up to testing our API, circ
React Advanced Conference 2021React Advanced Conference 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Code tasks like linting and testing are critical pieces of a developer’s workflow that help keep us sane like preventing syntax or style issues and hardening our core business logic. We’ll talk about how we can use GitHub Actions to automate these tasks and help keep our projects running smoothly.
TestJS Summit 2021TestJS Summit 2021
31 min
Test Effective Development
Developers want to sleep tight knowing they didn't break production. Companies want to be efficient in order to meet their customer needs faster and to gain competitive advantage sooner. We ALL want to be cost effective... or shall I say... TEST EFFECTIVE!But how do we do that?Are the "unit" and "integration" terminology serves us right?Or is it time for a change? When should we use either strategy to maximize our "test effectiveness"?In this talk I'll show you a brand new way to think about cost effective testing with new strategies and new testing terms!It’s time to go DEEPER!