Shared configuration and utility scripts to support Canvas LTI tool deployment (E2E) tests with Playwright.
This package provides:
- A pre-test authentication CLI (deployment-generate-auth)
- A shared Playwright config
- A small set of test utilities (helpers for logging in, handling banners, waiting for spinners, etc.)
Authentication is performed outside of Playwright tests and persisted via storageState, avoiding token leakage in reports.
In your consumer project (the project in which you want to run deployment tests):
npm i -D @oxctl/deployment-test-utilsAdd the required dev dependencies to your project (use your preferred package manager and versions):
npm i -D @oxctl/deployment-test-utils @playwright/test dotenvOptionally install Playwright browser binaries (if you haven't already):
npx playwright installThis library does not pin a Node.js version. Use a version appropriate for your project.
Note
Playwright 1.58.0 introduced a bug that causes duplicate test title errors. This version of the library constrains Playwright to <1.58.0 to avoid this issue, but if you are using a later version of Playwright in your project, you may need to adjust the version in your package.json to avoid conflicts.
The following must be set (locally via .env, or in CI via your provider's secrets/variables):
CANVAS_HOST- trailing slash is optionalOAUTH_TOKENTEST_PATH- leading slash is optional (Previously namedURLwhich was changed as it was found to be confusing.)
Example:
CANVAS_HOST=https://wibble.instructure.com
OAUTH_TOKEN=12345~QWERTYUIOPASDFGHJKLZXCVBNM
TEST_PATH=/accounts/1/external_tools/789This package exposes a CLI, deployment-generate-auth
It will:
- Validate required environment variables
- Request a session token
- Launch a browser and establish a session
- Save Playwright
storageStateto:playwright/.auth/user.jsonin the consumer repo workspace
It is not tidied up on your local machine and should never be committed to source control so should be added to .gitignore.
import { config } from '@oxctl/deployment-test-utils'
export default configThe config:
- Loads
.env - Uses the generated
storageState
Use the utilities from this repository when writing your deployment tests. Here's a simple example which asserts that some specific text, XXXXXXXXXXXXXXX, appears on a page. The test(s) can be as simple or as complex as seems appropriate.
import { dismissBetaBanner, getLtiIFrame, waitForNoSpinners, grantAccessIfNeeded, TEST_URL } from '@oxctl/deployment-test-utils'
test.describe('Test deployment', () => {
test('The tool should load and the text "XXXXXXXXXXXXXXX" should be shown', async ({context, page}) => {
await page.goto(TEST_URL)
await dismissBetaBanner(page)
// Handle LTI “Grant Access” flow if required
await grantAccessIfNeeded(page, context, TEST_URL)
const ltiIFrame = getLtiIFrame(page)
await waitForNoSpinners(ltiIFrame)
// Check there's specific text on the page
const text = ltiIFrame.getByText("XXXXXXXXXXXXXXX")
await expect(text).toBeVisible();
})
})If your LTI tool requires the user to grant access, you must call grantAccessIfNeeded in your tests. This is no longer handled during authentication setup.
{
"scripts": {
"pretest": "deployment-generate-auth",
"test": "playwright test",
"test:ci": "CI=true npm test",
"test:ui": "npm test -- --ui",
"test:report": "playwright show-report"
}
}This ensures auth always runs before tests.
src/
├── config.js # shared Playwright config (loads dotenv, sets `storageState`)
├── testUtils.js # reusable Playwright helpers and `TEST_URL`
├── shared/
│ └── url.js # pure helpers for normalising/building URLs
bin/
└── auth.setup.js # CLI: generates authenticated `storageState`
In this repo:
npm run build # bundle testUtils.js to dist/
npm pack # create a tarball for local installIn the consumer repo:
npm i ../path/to/oxctl-deployment-test-utils-1.0.0.tgzThen run tests as normal:
npx playwright testThis library is published to npmjs. To make a new release do either:
npm version patchfor a small change, or
npm version minorfor a large or 'breaking' change.
And then if it completes ok push the tags and GitHub actions will build and publish the package to npmjs.
git push
git push --tags