Playwright allows us to automate logging in to a Microsoft Online account. Steps We start at https://login.microsoftonline.com/ We provide the username and password, injected by using environment variables We are redirected to the main account page ms-account-login.spec.ts import { test } from '@playwright/test' test('test', async ({ page }) => { await page.goto('https://login.microsoftonline.com/') await page.getByRole('heading', { name: 'Sign in' }).click() await page.getByPlaceholder('Emai...| www.checklyhq.com
Social login using your personal Google or Google Gsuite account is a common use case for many login scenarios. Steps We start at a site that offers Google as an authentication provider. In this case we use Stack Overflow. We fetch the login page and click the “Login with Google” button. We are redirect to Google. We provide the username and password, injected by using environment variables. We are redirected back to the starting. google-login.spec.ts import { test } from '@playwright/tes...| www.checklyhq.com
Learn how to handle authentication in Playwright, including SSO, 2FA, Passkeys and more. Reuse authentication state across tests with storageState.| www.checklyhq.com
When creating browser checks, you probably run some code locally, store it in a Git repo or copy and paste it around a bit. This means the credentials in the script are at risk of being exposed. You should therefore replace any confidential data in your check scripts with variables or secrets. Variables and secrets There are two ways to store configuration information in Checkly: Variables and secrets. Both variables and secrets are encrypted at rest and in flight.| www.checklyhq.com
You might want to use (binary) files in your browser checks. For example, you might want to upload a file to an upload form in your webapp. Or, you might want to validate some aspect of a file that is available for download on your app. Testing downloads with the download event and Download object Playwright has a download event that you can use to intercept downloads. You can also use the Download object to retrieve the contents and metadata of the downloaded file(s).| www.checklyhq.com
Code-first synthetic monitoring platform for modern development teams. Monitor APIs, web apps, and user journeys with Playwright-powered browser checks, monitoring as code workflows, and seamless CI/CD integration.| www.checklyhq.com
Update response status TypeScript response.statusCode = 201 JavaScript response.statusCode = 201 Perform additional assertions In certain cases you might want to run additional assertion as part of your teardown script. TypeScript import { expect } from 'expect' expect(response.body).toBe('myString') JavaScript const { expect } = require('expect') expect(response.body).toBe('myString') This can come in handy when the main assertions of the API check are not fine-grained enough, or when you wa...| www.checklyhq.com
Setup and teardown scripts can be used to execute arbitrary JavaScript/TypeScript code before and/or after an API check. Both script types have access to all environment variables, runtime objects like request and response and popular npm packages like moment, axios and lodash. To get the most power out of API checks with setup and teardown scripts, we advise using the Checkly CLI. However, you can also use them via our web UI| www.checklyhq.com
Code-first synthetic monitoring platform for modern development teams. Monitor APIs, web apps, and user journeys with Playwright-powered browser checks, monitoring as code workflows, and seamless CI/CD integration.| www.checklyhq.com
Scenarios where a user provides credentials to get access to a web app are extremely common. They are also a great candidate for a browser check as these site transactions tend to be very crucial. Using Vercel deployment protection? Read this section on how to make this work with Checkly. To get started, check out the video below 👇 Username / password login The code snippet below shows how you can log into GitHub.| www.checklyhq.com
Here are some examples on how to address common authentication use cases with setup scripts. Using Vercel deployment protection? Read this section on how to make this work with Checkly. Fetch an external token TypeScript import axios from 'axios' // use 'await' on an axios HTTP get to fetch a token from a location const { data } = await axios.get('https://example.com/api/token') // add the token as a query parameters request.queryParameters['token'] = data.token JavaScript const axios = requi...| www.checklyhq.com
Code-first synthetic monitoring platform for modern development teams. Monitor APIs, web apps, and user journeys with Playwright-powered browser checks, monitoring as code workflows, and seamless CI/CD integration.| www.checklyhq.com
In some cases, you will need to provide authentication credentials to your Vercel deployment in order to run your browser checks. Vercel calls this Deployment Protection. To make optimal use of Checkly’s Vercel integration, Checkly will need access to Preview deployments and Production deployments, so we can validate your preview branches before they reach production and continuously monitor your production deployments. Vercel has a few different ways to authenticate your deployments. Each ...| www.checklyhq.com
npx checkly test Executes all the checks in the scope of your project on the Checkly cloud infrastructure. You can specify files to run by appending a pattern, e.g. npx checkly test home.spec.js api. Dry run all checks in your repo: Terminal npx checkly test Dry run checks that have product and api in the file name Terminal npx checkly test product api Record a test session in Checkly with git branch info, full logging, videos and traces.| www.checklyhq.com
Integrate Checkly with Vercel for app development and deployment to benefit from automated browser checks and production deployment testing.| www.checklyhq.com
Learn how to integrate Checkly with Opsgenie and deliver failure, degradation, and recovery events to any Opsgenie team. Check our guide!| www.checklyhq.com
Using the CLI in a CI/CD pipeline We’ve optimized the Checkly CLI to work in any CI/CD workflow. Here are the basics you need to know that will come in handy when adapting the examples we give you to your own, specific setup. For authentication, make sure to set the CHECKLY_API_KEY and CHECKLY_ACCOUNT_ID parameters as environment variables in your CI/CD platform. Set the reporter you want to use for the test command using the --reporter flag, i.e. --reporter=dot. To store a test session wit...| www.checklyhq.com
Using the CLI in a CI/CD pipeline We’ve optimized the Checkly CLI to work in any CI/CD workflow. Here are the basics you need to know that will come in handy when adapting the examples we give you to your own, specific setup. For authentication, make sure to set the CHECKLY_API_KEY and CHECKLY_ACCOUNT_ID parameters as environment variables in your CI/CD platform. Set the reporter you want to use for the test command using the --reporter flag, i.e. --reporter=dot. To store a test session wit...| www.checklyhq.com
GitHub deployments are webhook events triggered by GitHub whenever a deployment service reports a successful deployment event. This works out-of-the-box with the following services. Vercel for GitHub Heroku Pipelines Any (SaaS) service that interacts with the GitHub deployments API and reports the correct “success” message will work, both with production and preview deployments. Setting up your GitHub integration Go to the integrations tab in your account settings and click the “Integra...| www.checklyhq.com
 files in your browser checks. For example, you might want to upload a file to an upload%20form in your webapp. Or, you might want to validate some aspect of a file that is available for download on your%20app.</p>%20<a class=&)
 your checks from your code base as part of your CI/CD workflow.</p>%20<a class=&)
