# Automate Your Testing Workflows Using BrowserStack’s AI Agents

## Метаданные

- **Канал:** CSS Weekly
- **YouTube:** https://www.youtube.com/watch?v=ar_jI23j1CM
- **Источник:** https://ekstraktznaniy.ru/video/37906

## Транскрипт

### Segment 1 (00:00 - 05:00) []

If you’ve ever tried setting up end-to-end testing for your applications or websites, you know how difficult and time-consuming this is. Not anymore. In this video, I'll show you how to utilize new BrowserStack AI automation features to generate comprehensive test suites effortlessly. It really is as simple as it sounds. Here's how it works. BrowserStack, as you know by now, is the most comprehensive test tool stack. It's open, flexible, and comes with a ton of fantastic, superior AI features throughout the entire testing lifecycle. You're going to find out exactly what this means in a moment. To start using BrowserStack, you're going to need an account. So, if you don't have one yet, create it right now. Hit the link in the description and sign up today. You're going to get a nice free trial where you can test out all the amazing features that they have. Before I go on, I'm going to mention that this video is kindly sponsored by BrowserStack, and I personally am more than happy to create a video about such a fantastic tool as BrowserStack. To start using AI features in BrowserStack, you're going to need to opt in, and you can do that in settings. So from this screen, I'm going to go to the Dashboard, and I'm going to open Settings. Here, under BrowserStack AI, I'm going to opt in to BrowserStack AI. I'm going to hit Save, and I'm ready to use BrowserStack AI features. And before I show them to you, I'm going to specifically mention that they are privacy aware. So you don't have to worry about your data leaking out, about BrowserStack using your data to train their models or something — your data is private and safe, and you don't ever have to worry about using AI within BrowserStack. All right, now that we’ve enabled BrowserStack AI, we can actually use it. One of the best use cases for BrowserStack AI is to let it write tests for you. I will open the Products menu here, and under Web Testing, I will select Test Management. Here in the dashboard, I can see the list of all of my projects. If you don't have one, then create one right now. I already have one. This is Baseline Status for Video. And this is actually my project, my app that I will use to demonstrate BrowserStack features. Baseline Status for Video is a simple online app that allows users to create baseline status widgets for their video guides. I will open it in another tab here. And this is essentially all there is to this app. You have this widget that is displayed on the screen, and once you hit Record, the screen is recorded with a nice animation, and then a user can import it into their video editing software and use it in their technical guides. So I want to use BrowserStack to test this particular app. And specifically, the most important feature that I want to test is the Feature ID, because this allows me to actually change the feature ID in the widget that users will actually use. So, for example, instead of `anchor-positioning`, we can set this to `margin` and then the widget will turn into a margin. I want to make sure that this is working always. And then, of course, there are a number of other options that I can also very easily test with BrowserStack, and you will see exactly how in a moment. Alright, so now that you know what Baseline Status for Video is, we can actually start creating tests for it in BrowserStack. I'm going to jump again into the BrowserStack dashboard. You don't only see the list of your projects here, but you also see all BrowserStack AI agents that are available for you to use. Specifically, we're going to use this one, Generate Test Cases, and this one, Automate Test Cases. Those two agents will allow me to easily, effortlessly create comprehensive tests for my application. As I want to create tests for my project, Baseline Status for Video, I'm going to open it, and immediately on the screen, I see an “Add Test Cases” input field that allows me to enter a title for my test case, and then BrowserStack will figure out all the steps for this test. Or, I can generate the entire test suite if I use the “Generate with AI” feature. I'm going to open this, and here you're going to see that you can actually upload your entire project specification or project requirements document. BrowserStack will read that and figure out exactly how to test your application. And I'm going to mention here that you don't have to have a perfect document for this. So even if you have gaps in your document, BrowserStack will be able to fill in those gaps automatically and figure out exactly what needs to be tested and how. As I don't have a document for my application, I will just enter the specification right here in the field: “Suggest tests to ensure that baseline status widget changes when feature id input is changed — the field is prepopulated, so before changing it, the text needs to be cleared. Then ‘margin’ can be inputed and after that baseline status widget should change and display ‘margin’. ” Essentially, I'm just giving the rough idea about what I want to test, and I'm going to let BrowserStack figure out the details. I'm going to hit “Generate” here, and AI is now figuring out exactly which steps or which tests should my requirement entail. So BrowserStack generated four scenarios across 14 test cases just based on this short input that

### Segment 2 (05:00 - 10:00) [5:00]

I've given it. And now you can open each one of those scenarios and see exactly which test cases are created. Of course, you don't have to use all scenarios. You can select only the ones that make sense for you. And the beautiful thing about this is that you don't really have to think about all the different paths users can take, BrowserStack will figure out all of those for you. So you won't see just happy path tests here, but you'll also see testing for errors and so on. For this demo, I'm just going to use the second test, ”Verify that Feature ID field accepts new input after clearing prepopulated test”. I'm going to open this, and I can see details about this test case. Here are the preconditions, and here are exactly the steps that need to be taken for this test. So first, Feature ID input has to be empty after previous clearing. Then margin has to be entered, and then the Baseline Status widget should be checked to see that the widget is updated and displays margin. This sounds pretty good. Now, based on this, I actually want to create an automated test that will execute all of those steps for me. And this is exactly where the second part of BrowserStack AI automation comes in, specifically, Low Code Automation. So I will add this test case, and once it's added, I'm going to see it in my test cases. Let's rename this folder to “Feature ID,” just so we have nice organization, and I'm going to open this test case. This is exactly what we've seen before. And now I'm going to use BrowserStack automation to actually execute all of those steps. I'm going to hit “Automate” and I am presented with test case details. I need to set the URL here, and this is going to be baseline-status-for-video. css-weekly. com — I don't need authentication. I'm going to leave this exactly as is, and I'm going to automate the test case. So the BrowserStack is working its magic, and once it's done, I will be able to run exactly this automated workflow that I'm right now creating using BrowserStack AI. All right, my automation is complete. So I can view the test now. These are the steps for the test that BrowserStack generated automatically. First, it opens the page, exactly as expected, then it clicks on the input field. Okay. And then it types “marginanchor-positioning” — so this is not really ideal, but luckily it's very easy to tweak and change this. So I'm just going to delete “anchor-positioning”. And now, “margin” will be in the field. So now we want to validate that “margin” is in the field. The next step is “Validate Unknown Availability. ” And this step was actually created because the input initially was not correct. But we don't really need this step because we're already validating that “margin” is in the widget, and once the margin the web component will take care of the rest, so we don't have to worry about that. I'm just going to remove the last three steps. And basically, this should be okay. I'm going to hit “Save” here and I will try running this workflow. I'm going to hit Play. So now I need to download the app that will allow me to automatically execute all of the steps outlined here. Of course, the app is also available for Windows, so if you're not on a Mac, it's perfectly fine. I'm going to download and install the app. Now, I'm not going to show you how to install it, because this process is straightforward; you already know how to do that. So through the magic of editing, I will just open the Low Code Automation Tool by BrowserStack: “BrowserStack Low Code Automation. ” Here is the BrowserStack Low Code Automation tool. I'm going to select the project that I'm using: Baseline Status for Video. And once I do, I see my test right here. So I'm going to run this test now. And once I do this, a nice little overlay window will appear, and it will automatically execute all the steps. I can see behind in the test browser what is happening. The widget is changing, and BrowserStack has validated all of this. Now. this is, of course, a very simple, straightforward use case, but it gives you a clear idea about how powerful BrowserStack automation actually is. Another way that you can actually use this Low Code Automation Tool by BrowserStack is to record the steps yourself. So, for example, let's try setting up another test directly in the Low Code Automation Tool. And I want to test if this widget here, Video Background, is working. Specifically, when I change it, I want to see that the background is actually changing. So I will go to test listing and I will record another test. Again, I'm going to use Baseline Status for Video app, and I'm going to hit “Start Recording. ” Once I do, the app will be opened, and I'm going to get this overlay again. I'm going to move the browser a little bit to the right so I can see my controls here. There we go. The steps that I want to execute for this test are: Clicking the second background, then verifying that the background is changed. Straightforward and simple. And this Low Code Automation Tool is already recording.

### Segment 3 (10:00 - 14:00) [10:00]

So if I click around, all of those actions will automatically be recorded. So you can very easily create any workflow that you want. But you can also use AI to execute all of this for you. So let me just remove all of those steps that we've recorded. I'm going to delete those, and I'm going to ask AI to do this for me. When you open it for the first time, you're going to see a few tips on how you can utilize it. I'm going to hit okay here. I'm going to enter my prompt: “change video background color to the second value and ensure that the scene background has indeed been changed. ” And I'm intentionally being a little bit vague here because this is actually one of the powerful features of BrowserStack AI automation. You don't have to select the specific fields. You can be vague, and BrowserStack will figure out for you what you actually want to do. So in this example, instead of specifying that I want to click the green background, I'm actually second item. That way, if I change the default values for my app, for example, instead of this red, the default should be green, maybe — then the test will still work because instead of green, it will check for the red and it will verify that the background is actually red. You get what I'm saying. All right, let's hit “Perform” here. And now BrowserStack will execute all those steps. As the steps are executed, you get a clear reasoning of what the AI is doing. So you know exactly what is happening, and in this case, the test is working. AI figured out exactly what we wanted. Initially, the dark background is selected, but it needs to be changed to the green one. And once it is, we need to verify that the scene actually is green. And this is exactly what happened. AI has figured out that the preview area has changed to bright green exactly as we wanted. So, I'm going to save the recording. I'm going to set the test name to “Video Background Color,” and I'm going to hit “Save and Run”. So, now BrowserStack will run the workflow again to make sure that it works. And we already know that it does work because we already did run it. So, we're pretty much good to go once the test finishes. So, as you've seen, using AI gives you the ability to not think about which element you need to select. You actually just speak plainly to AI what you want to check, and AI will figure out the steps needed to check this for you. And this is precisely the power of AI features within BrowserStack. I know a lot of apps are actually cramming AI into everything, but right here I think you've seen for yourself how useful and practical AI in BrowserStack is. It allows you to create an entire test suite and even test cases based on the test suite automatically. Of course, as it's always the case with AI, you might need to tweak some things yourself, but this will save you a ton of time in creating comprehensive test suites for your apps and websites. I'm going to return to the browser now, and I'm going to open “All tests. ” And you can see that the “Video Background Test” has been created, and it's already available right here within BrowserStack. I'm going to open the menu here, and you're going to see that there are really a ton of tools available for you to use within BrowserStack. I've shown you how to use Low Code Automation Tool, and I'm going to single out Accessibility Automation, which is absolutely fantastic. You need to make sure that your websites and apps are accessible, and BrowserStack will help you do this automatically. And one of my personal favorites, Percy, visual regression testing, at its finest. If you haven't tried it out yet, then you absolutely should. So, I hope this short guide gives you an idea about how powerful AI features within BrowserStack are. You can create entire test suites. You can create test cases, and you can do a ton of other stuff using AI. Here is a quick overview. If you have a comprehensive, massive test suite, then you can let AI figure out which test to run. Also, very soon you will be able to use new features such as Test Data Generator agent, Test Case Maintenance agent, and Test Deduplication agent”. This one is pretty cool. It will figure out if you have duplicate, unnecessary, redundant tests and automatically remove those. Okay, I hope this gives you an idea about how powerful BrowserStack is and why you should start using BrowserStack’s AI features today. Thank you so much for your attention, and thanks so much to BrowserStack for sponsoring. My name is Zoran Jambor. I will see and hear you in a different BrowserStack test suite. Or rather, in the next video.