8f22b2fd74
**What this PR does**: Adds our first UI integration test using [Playwright](https://playwright.dev/) and runs the test on CI. Right now the test: - logs into Grafana - configures the plugin (if it isn't already) - creates an OnCall schedule, where the current user will be OnCall - creates an escalation chain to notify based on the newly created OnCall schedule - creates a webhook integration, attached to the created escalation chain - sends a demo alert for the new integration - goes to the alert groups page and validates that the escalation step to alert the OnCall user actually happened Currently the Playwright tests are run against the 3 default headless browsers, chromium, Firefox, and webkit. The CI job that runs these tests is run as a matrix against 3 tagged versions of `grafana`; `main`, `latest`, and `9.2.6`. Secondly, it adds most of the logic for a second test which: - logs into Grafana - configures the plugin (if it isn't already) - goes to the user's settings, verifies their phone number (using a tool called [MailSlurp](https://www.mailslurp.com/)) - configures the current user's default escalation policy to send alerts via SMS - creates an escalation policy and configures it to send alerts to our current user - creates an integration and assigns the created escalation policy - triggers a test alert + verifies that we receive the SMS alert text (again, using MailSlurp) **Which issue(s) this PR fixes**: Closes #873 **Checklist** - [x] Tests updated - [ ] Documentation added (N/A) - [ ] `CHANGELOG.md` updated (N/A)
109 lines
3.8 KiB
TypeScript
109 lines
3.8 KiB
TypeScript
import type { Locator, Page } from '@playwright/test';
|
|
import { randomUUID } from 'crypto';
|
|
|
|
type SelectorType = 'gSelect' | 'grafanaSelect';
|
|
type SelectDropdownValueArgs = {
|
|
page: Page;
|
|
value: string;
|
|
// if set, search for a dropdown that contains this text as its placeholder
|
|
placeholderText?: string;
|
|
// specifies which type of select dropdown we are dealing with (since we currently mix-and-match 3 different components...)
|
|
selectType?: SelectorType;
|
|
// if provided, use this Locator as the root of our search for the dropdown
|
|
startingLocator?: Locator;
|
|
// if true, when selecting the dropdown option, use an exact match, otherwise use a substring contains match
|
|
optionExactMatch?: boolean;
|
|
};
|
|
|
|
type ClickButtonArgs = {
|
|
page: Page;
|
|
buttonText: string;
|
|
// if provided, search for the button by data-testid
|
|
dataTestId?: string;
|
|
|
|
// if provided, use this Locator as the root of our search for the button
|
|
startingLocator?: Locator;
|
|
};
|
|
|
|
export const fillInInput = (page: Page, selector: string, value: string) => page.fill(selector, value);
|
|
|
|
export const fillInInputByPlaceholderValue = (page: Page, placeholderValue: string, value: string) =>
|
|
fillInInput(page, `input[placeholder*="${placeholderValue}"]`, value);
|
|
|
|
export const getInputByName = (page: Page, name: string): Locator => page.locator(`input[name="${name}"]`);
|
|
|
|
export const clickButton = async ({
|
|
page,
|
|
buttonText,
|
|
startingLocator,
|
|
dataTestId,
|
|
}: ClickButtonArgs): Promise<void> => {
|
|
const baseLocator = dataTestId ? `button[data-testid="${dataTestId}"]` : 'button';
|
|
const button = (startingLocator || page).locator(`${baseLocator} >> text=${buttonText}`);
|
|
|
|
await button.waitFor({ state: 'visible' });
|
|
await button.click();
|
|
};
|
|
|
|
/**
|
|
* at a minimum must specify selectType OR placeholderText
|
|
* if both are specified selectType takes precedence
|
|
*/
|
|
const openSelect = async ({
|
|
page,
|
|
placeholderText,
|
|
selectType,
|
|
startingLocator,
|
|
}: SelectDropdownValueArgs): Promise<void> => {
|
|
/**
|
|
* we currently mix three different dropdown components in the UI..
|
|
* so we need to support all of them :(
|
|
*/
|
|
const dropdownSelectors: Record<SelectorType, string> = {
|
|
gSelect: 'div[class*="GSelect"]',
|
|
grafanaSelect: `div[class*="grafana-select-value-container"] ${
|
|
placeholderText ? `>> text=${placeholderText} ` : ''
|
|
}>> ..`,
|
|
};
|
|
|
|
const dropdownSelector = dropdownSelectors[selectType];
|
|
const placeholderSelector = `text=${placeholderText}`;
|
|
const selector = dropdownSelector || placeholderSelector;
|
|
|
|
const selectElement: Locator = (startingLocator || page).locator(selector);
|
|
await selectElement.waitFor({ state: 'visible' });
|
|
await selectElement.click();
|
|
};
|
|
|
|
/**
|
|
* notice the difference in double quotes - https://playwright.dev/docs/selectors#text-selector
|
|
*/
|
|
const textMatchSelector = (optionExactMatch: boolean, value: string): string =>
|
|
optionExactMatch ? `text="${value}"` : `text=${value}`;
|
|
|
|
const chooseDropdownValue = async ({ page, value, optionExactMatch = true }: SelectDropdownValueArgs): Promise<void> =>
|
|
page.locator(`div[id^="react-select-"][id$="-listbox"] >> ${textMatchSelector(optionExactMatch, value)}`).click();
|
|
|
|
export const selectDropdownValue = async (args: SelectDropdownValueArgs): Promise<void> => {
|
|
await openSelect(args);
|
|
await chooseDropdownValue(args);
|
|
};
|
|
|
|
export const generateRandomValue = (): string => randomUUID();
|
|
|
|
/**
|
|
* wait for the options to appear
|
|
*
|
|
* note that they are not rendered next to the button in the HTML output
|
|
* they're rendered closer to the <body> tag
|
|
*/
|
|
export const selectValuePickerValue = async (
|
|
page: Page,
|
|
valuePickerText: string,
|
|
optionExactMatch = true
|
|
): Promise<void> =>
|
|
(
|
|
await page.waitForSelector(
|
|
`div[class*="grafana-select-menu"] >> ${textMatchSelector(optionExactMatch, valuePickerText)}`
|
|
)
|
|
).click();
|