Skip to content

Commit a5674a9

Browse files
IvanGoncharovIvanGoncharov
authored
tests: split page object model into separate file (#282)
1 parent 72b588c commit a5674a9

File tree

2 files changed

+128
-125
lines changed

2 files changed

+128
-125
lines changed

‎tests/PageObjectModel.ts

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
import { type Locator, type Page } from '@playwright/test';
2+
3+
interface VoyagerURLSearchParams {
4+
url?: string;
5+
withCredential?: boolean;
6+
}
7+
8+
export async function gotoVoyagerPage(
9+
page: Page,
10+
searchParams?: VoyagerURLSearchParams,
11+
) {
12+
const search = new URLSearchParams();
13+
if (searchParams?.url != null) {
14+
search.append('url', searchParams.url);
15+
}
16+
if (searchParams?.withCredential != null) {
17+
search.append('withCredential', searchParams.withCredential.toString());
18+
}
19+
20+
await page.goto('/?' + search.toString());
21+
return new PlaywrightVoyagerPage(page);
22+
}
23+
24+
class PlaywrightVoyagerPage {
25+
readonly page: Page;
26+
readonly graphLoadingAnimation: Locator;
27+
28+
readonly changeSchemaDialog: PlaywrightChangeSchemaDialog;
29+
30+
constructor(page: Page) {
31+
this.page = page;
32+
33+
this.graphLoadingAnimation = page
34+
.getByRole('status')
35+
.getByText('Transmitting...');
36+
37+
this.changeSchemaDialog = new PlaywrightChangeSchemaDialog(page);
38+
}
39+
40+
async waitForGraphToBeLoaded() {
41+
await this.graphLoadingAnimation.waitFor({ state: 'hidden' });
42+
}
43+
}
44+
45+
class PlaywrightChangeSchemaDialog {
46+
readonly dialog: Locator;
47+
readonly openButton: Locator;
48+
49+
readonly presetsTab: PlaywrightChangeSchemaPresetsTab;
50+
readonly sdlTab: PlaywrightChangeSchemaSDLTab;
51+
readonly introspectionTab: PlaywrightChangeSchemaIntrospectionTab;
52+
53+
readonly displayButton: Locator;
54+
readonly cancelButton: Locator;
55+
56+
constructor(page: Page) {
57+
this.dialog = page.getByRole('dialog');
58+
this.openButton = page.getByRole('button', {
59+
name: 'Change Schema',
60+
});
61+
62+
this.presetsTab = new PlaywrightChangeSchemaPresetsTab(this.dialog);
63+
this.sdlTab = new PlaywrightChangeSchemaSDLTab(this.dialog);
64+
this.introspectionTab = new PlaywrightChangeSchemaIntrospectionTab(
65+
this.dialog,
66+
);
67+
68+
this.displayButton = this.dialog.getByRole('button', { name: 'Display' });
69+
this.cancelButton = this.dialog.getByRole('button', { name: 'Cancel' });
70+
}
71+
}
72+
73+
class PlaywrightChangeSchemaBaseTab {
74+
readonly tab: Locator;
75+
readonly tabPanel: Locator;
76+
77+
constructor(dialog: Locator, name: string) {
78+
this.tab = dialog.getByRole('tab', { name });
79+
this.tabPanel = dialog.getByRole('tabpanel', { name });
80+
}
81+
}
82+
83+
export const SchemaPresets = [
84+
'Star Wars',
85+
'Yelp',
86+
'Shopify Storefront',
87+
'GitHub',
88+
] as const;
89+
class PlaywrightChangeSchemaPresetsTab extends PlaywrightChangeSchemaBaseTab {
90+
readonly presetButtons: { [name in typeof SchemaPresets[number]]: Locator };
91+
92+
constructor(dialog: Locator) {
93+
super(dialog, 'Presets');
94+
95+
this.presetButtons = {} as any;
96+
for (const name of SchemaPresets) {
97+
this.presetButtons[name] = this.tabPanel.getByRole('button', { name });
98+
}
99+
}
100+
}
101+
102+
class PlaywrightChangeSchemaSDLTab extends PlaywrightChangeSchemaBaseTab {
103+
readonly sdlTextArea: Locator;
104+
105+
constructor(dialog: Locator) {
106+
super(dialog, 'SDL');
107+
108+
this.sdlTextArea = this.tabPanel.getByPlaceholder('Paste SDL Here');
109+
}
110+
}
111+
112+
class PlaywrightChangeSchemaIntrospectionTab extends PlaywrightChangeSchemaBaseTab {
113+
readonly introspectionTextArea: Locator;
114+
readonly copyIntrospectionQueryButton: Locator;
115+
116+
constructor(dialog: Locator) {
117+
super(dialog, 'Introspection');
118+
119+
this.introspectionTextArea = this.tabPanel.getByPlaceholder(
120+
'Paste Introspection Here',
121+
);
122+
this.copyIntrospectionQueryButton = this.tabPanel.getByRole('button', {
123+
name: 'Copied!',
124+
});
125+
}
126+
}

‎tests/demo.spec.ts

+2-125
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,7 @@
1-
import { expect, type Locator, type Page, test } from '@playwright/test';
1+
import { expect, test } from '@playwright/test';
22
import { buildSchema, graphqlSync } from 'graphql';
33

4-
interface VoyagerURLSearchParams {
5-
url?: string;
6-
withCredential?: boolean;
7-
}
8-
9-
async function gotoVoyagerPage(
10-
page: Page,
11-
searchParams?: VoyagerURLSearchParams,
12-
) {
13-
const search = new URLSearchParams();
14-
if (searchParams?.url != null) {
15-
search.append('url', searchParams.url);
16-
}
17-
if (searchParams?.withCredential != null) {
18-
search.append('withCredential', searchParams.withCredential.toString());
19-
}
20-
21-
await page.goto('/?' + search.toString());
22-
return new PlaywrightVoyagerPage(page);
23-
}
24-
25-
class PlaywrightVoyagerPage {
26-
readonly page: Page;
27-
readonly graphLoadingAnimation: Locator;
28-
29-
readonly changeSchemaDialog: PlaywrightChangeSchemaDialog;
30-
31-
constructor(page: Page) {
32-
this.page = page;
33-
34-
this.graphLoadingAnimation = page
35-
.getByRole('status')
36-
.getByText('Transmitting...');
37-
38-
this.changeSchemaDialog = new PlaywrightChangeSchemaDialog(page);
39-
}
40-
41-
async waitForGraphToBeLoaded() {
42-
await this.graphLoadingAnimation.waitFor({ state: 'hidden' });
43-
}
44-
}
45-
46-
class PlaywrightChangeSchemaDialog {
47-
readonly dialog: Locator;
48-
readonly openButton: Locator;
49-
50-
readonly presetsTab: PlaywrightChangeSchemaPresetsTab;
51-
readonly sdlTab: PlaywrightChangeSchemaSDLTab;
52-
readonly introspectionTab: PlaywrightChangeSchemaIntrospectionTab;
53-
54-
readonly displayButton: Locator;
55-
readonly cancelButton: Locator;
56-
57-
constructor(page: Page) {
58-
this.dialog = page.getByRole('dialog');
59-
this.openButton = page.getByRole('button', {
60-
name: 'Change Schema',
61-
});
62-
63-
this.presetsTab = new PlaywrightChangeSchemaPresetsTab(this.dialog);
64-
this.sdlTab = new PlaywrightChangeSchemaSDLTab(this.dialog);
65-
this.introspectionTab = new PlaywrightChangeSchemaIntrospectionTab(
66-
this.dialog,
67-
);
68-
69-
this.displayButton = this.dialog.getByRole('button', { name: 'Display' });
70-
this.cancelButton = this.dialog.getByRole('button', { name: 'Cancel' });
71-
}
72-
}
73-
74-
class PlaywrightChangeSchemaBaseTab {
75-
readonly tab: Locator;
76-
readonly tabPanel: Locator;
77-
78-
constructor(dialog: Locator, name: string) {
79-
this.tab = dialog.getByRole('tab', { name });
80-
this.tabPanel = dialog.getByRole('tabpanel', { name });
81-
}
82-
}
83-
84-
const SchemaPresets = [
85-
'Star Wars',
86-
'Yelp',
87-
'Shopify Storefront',
88-
'GitHub',
89-
] as const;
90-
class PlaywrightChangeSchemaPresetsTab extends PlaywrightChangeSchemaBaseTab {
91-
readonly presetButtons: { [name in typeof SchemaPresets[number]]: Locator };
92-
93-
constructor(dialog: Locator) {
94-
super(dialog, 'Presets');
95-
96-
this.presetButtons = {} as any;
97-
for (const name of SchemaPresets) {
98-
this.presetButtons[name] = this.tabPanel.getByRole('button', { name });
99-
}
100-
}
101-
}
102-
103-
class PlaywrightChangeSchemaSDLTab extends PlaywrightChangeSchemaBaseTab {
104-
readonly sdlTextArea: Locator;
105-
106-
constructor(dialog: Locator) {
107-
super(dialog, 'SDL');
108-
109-
this.sdlTextArea = this.tabPanel.getByPlaceholder('Paste SDL Here');
110-
}
111-
}
112-
113-
class PlaywrightChangeSchemaIntrospectionTab extends PlaywrightChangeSchemaBaseTab {
114-
readonly introspectionTextArea: Locator;
115-
readonly copyIntrospectionQueryButton: Locator;
116-
117-
constructor(dialog: Locator) {
118-
super(dialog, 'Introspection');
119-
120-
this.introspectionTextArea = this.tabPanel.getByPlaceholder(
121-
'Paste Introspection Here',
122-
);
123-
this.copyIntrospectionQueryButton = this.tabPanel.getByRole('button', {
124-
name: 'Copied!',
125-
});
126-
}
127-
}
4+
import { gotoVoyagerPage, SchemaPresets } from './PageObjectModel';
1285

1296
test('open demo', async ({ page }) => {
1307
const voyagerPage = await gotoVoyagerPage(page);

0 commit comments

Comments
 (0)