@ory/elements-test
v0.5.0
Published
Ory Elements provides a testing library built on top of [Playwright](https://playwright.dev/). It allows you to test your application integration with Ory automatically.
Downloads
905
Readme
Ory Elements Test
Ory Elements provides a testing library built on top of Playwright. It allows you to test your application integration with Ory automatically.
A lot of tests for common use-cases have been implemented in the library so that you can focus on only writing tests for your specific edge-cases.
Installation
You can install Playwright and the Ory Elements Test library using npm.
@ory/elements-test
only supports playwright 1.32.0 or higher. If you are using
an older version of playwright, please update it.
npm i @ory/elements-test @playwright/test --save-dev
To set up the playwright configuration, run the following command:
npm init playwright@latest
Usage
Playwright should have created a playwright.config.ts
file in your project.
Here, we will add your application web server configurations, environment setup
and specify which directory contains your tests. In this example, all tests will
be located in the e2e
directory under the root of your project.
Environment variables can be setup through a bash script or any other method you
prefer. In this example, we will add the APPLICATION_URL
and ORY_PROJECT_URL
environment variables inside the global-setup.ts
file which should be created
by you in the root of your project.
const globlSetup = async () => {
process.env.APPLICATION_URL = "http://localhost:3000"
process.env.ORY_PROJECT_URL = "http://localhost:4000"
}
export default globlSetup
Below is an example of running Next.js on port 3000.
/* Run your local dev server before starting the tests */
webServer: [
{
env: {
NEXT_PUBLIC_ORY_SDK_URL: "http://localhost:4000",
},
command: "npm run dev -- --port 3000",
timeout: 120 * 1000,
port: 3100,
reuseExistingServer: !process.env.CI,
},
// ...
// other web servers
],
To test against an Ory Network project, add the Ory Tunnel to your configuration.
/* Run your local dev server before starting the tests */
webServer: [
{
env: {
APPLICATION_URL: "http://localhost:3000", // <-- the url where your application is running
ORY_PROJECT_URL: "http://localhost:4000",
},
command: "ory tunnel ${APPLICATION_URL} ${ORY_PROJECT_URL} -q",
port: 4000,
},
// ...
// other web servers
]
Writing Tests
import { LoginMocks, LoginPage, test } from "@ory/elements-test"
test.describe.parallel("Login Page", () => {
test("login success", async ({ environment, page }) => {
// get the application url and ory project url from the environment
// variables
// APPLICATION_URL is the url where your application is running
// ORY_PROJECT_URL is the url of the Ory tunnel mirroring your Ory Network project (in this case we mock it)
const { applicationUrl, oryProjectUrl } = environment
// create a new login page instance
// the login page instance contains helper
// functions for selecting elements on the page
const loginPage = new LoginPage(page, applicationUrl, oryProjectUrl)
// We run the login success mock test from the `@ory/elements-test` library
await LoginMocks.LoginSuccessTest(loginPage)
})
})