Skip to content

Commit b98882e

Browse files
clarissarichardclarissarichard
authored
OE-1646: Write reader settings tests (#165)
* Created web-reader page and began reader settings tests * Filled in remaining locators * Confirmed settings locators work correctly * Added a few more settings tests * Pushing any changes since yesterday * Added a few more tests * Split HTML and PDF classes and tests * Corrected zoomIn and zoomOut functions * Removed console logs * Add test to confirm stays on same page or chapter when pagination is changed * Updated and refactored tests * Added extra awaits * Added test to confirm settings are maintained across pubs * Moved expect statements to tests
1 parent 4858ad4 commit b98882e

File tree

3 files changed

+447
-0
lines changed

3 files changed

+447
-0
lines changed

‎playwright/pageobjects/web-reader.page.ts‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
import { Locator, Page, expect } from '@playwright/test';
2+
3+
class WebReaderPage {
4+
readonly page: Page;
5+
readonly webReaderHomepage: Locator;
6+
readonly backButton: Locator;
7+
readonly tocButton: Locator;
8+
readonly settingsButton: Locator;
9+
readonly defaultFont: Locator;
10+
readonly serifFont: Locator;
11+
readonly sansSerifFont: Locator;
12+
readonly dyslexiaFont: Locator;
13+
readonly whiteBackground: Locator;
14+
readonly sepiaBackground: Locator;
15+
readonly blackBackground: Locator;
16+
readonly resetTextSize: Locator;
17+
readonly decreaseTextSize: Locator;
18+
readonly increaseTextSize: Locator;
19+
readonly zoomInButton: Locator;
20+
readonly zoomOutButton: Locator;
21+
readonly paginatedStyle: Locator;
22+
readonly scrollingStyle: Locator;
23+
readonly fullScreenButton: Locator;
24+
readonly exitFullScreenButton: Locator;
25+
readonly previousPageButton: Locator;
26+
readonly nextPageButton: Locator;
27+
readonly firstChapter: Locator;
28+
readonly lastChapter: Locator;
29+
readonly chapterName: Locator;
30+
readonly chapterHeading: Locator;
31+
readonly specificText: Locator;
32+
readonly pageOne: Locator;
33+
readonly pageTwo: Locator;
34+
35+
constructor(page: Page) {
36+
this.page = page;
37+
38+
// web reader examples homepage
39+
this.webReaderHomepage = page.getByRole('heading', {
40+
name: 'NYPL Web Reader',
41+
});
42+
43+
// header
44+
this.backButton = page.getByLabel('Return to Homepage');
45+
this.tocButton = page.getByLabel('Table of Contents');
46+
this.firstChapter = page.getByRole('menuitem').first();
47+
this.lastChapter = page.getByRole('menuitem').last();
48+
this.settingsButton = page.getByRole('button', {
49+
name: 'Settings',
50+
exact: true,
51+
});
52+
this.fullScreenButton = page.getByRole('button', {
53+
name: 'Toggle full screen',
54+
});
55+
this.exitFullScreenButton = page.getByText('Full screen exit', {
56+
exact: true,
57+
});
58+
59+
// reader settings
60+
this.zoomInButton = page.getByRole('button', { name: 'Zoom In' });
61+
this.zoomOutButton = page.getByRole('button', { name: 'Zoom Out' });
62+
63+
this.defaultFont = page.getByText('Default', { exact: true });
64+
this.serifFont = page.getByText('Serif', { exact: true });
65+
this.sansSerifFont = page.getByText('Sans-Serif', { exact: true });
66+
this.dyslexiaFont = page.getByText('Dyslexia', { exact: true });
67+
68+
this.whiteBackground = page.getByText('Day', { exact: true });
69+
this.sepiaBackground = page.getByText('Sepia', { exact: true });
70+
this.blackBackground = page.getByText('Night', { exact: true });
71+
72+
this.resetTextSize = page.getByLabel('Reset settings');
73+
this.decreaseTextSize = page.getByLabel('Decrease font size');
74+
this.increaseTextSize = page.getByLabel('Increase font size');
75+
76+
this.paginatedStyle = page.getByText('Paginated', { exact: true });
77+
this.scrollingStyle = page.getByText('Scrolling', { exact: true });
78+
79+
// content
80+
this.chapterName = page.getByText(
81+
'EXTRACTS (Supplied by a Sub-Sub-Librarian).'
82+
);
83+
this.chapterHeading = page
84+
.locator('iframe[title="Moby-Dick"]')
85+
.contentFrame()
86+
.getByRole('heading', {
87+
name: 'EXTRACTS (Supplied by a Sub-Sub-Librarian).',
88+
level: 1,
89+
});
90+
this.specificText = page
91+
.locator('iframe[title="Moby-Dick"]')
92+
.contentFrame()
93+
.getByText('—WHALE SONG.');
94+
this.pageOne = page
95+
.locator('#mainContent')
96+
.locator('[data-page-number="1"]');
97+
this.pageTwo = page
98+
.locator('#mainContent')
99+
.locator('[data-page-number="2"]');
100+
101+
// footer
102+
this.previousPageButton = page.getByLabel('Previous Page');
103+
this.nextPageButton = page.getByLabel('Next Page');
104+
}
105+
106+
// hopefully better handles slow load time (use load or networkidle)
107+
async loadPage(gotoPage: string): Promise<WebReaderPage> {
108+
await this.page.goto(gotoPage, { waitUntil: 'load' });
109+
return new WebReaderPage(this.page);
110+
}
111+
}
112+
113+
class HtmlReaderPage extends WebReaderPage {
114+
async getIframe(): Promise<Locator> {
115+
const htmlElement = this.page.frameLocator('#mainContent').locator('html');
116+
return htmlElement;
117+
}
118+
119+
async getTextSize(): Promise<undefined | string> {
120+
return (await this.getIframe()).evaluate((el) => {
121+
return window.getComputedStyle(el).getPropertyValue('--USER__fontSize');
122+
});
123+
}
124+
125+
async changeSettings(): Promise<void> {
126+
await this.settingsButton.click();
127+
await this.dyslexiaFont.click();
128+
await this.sepiaBackground.click();
129+
await this.increaseTextSize.click();
130+
await this.scrollingStyle.click();
131+
}
132+
133+
async scrollDown(): Promise<void> {
134+
await this.tocButton.click();
135+
await this.chapterName.click();
136+
await expect(await this.tocButton.getAttribute('aria-expanded')).toBe(
137+
'false'
138+
);
139+
await this.specificText.scrollIntoViewIfNeeded();
140+
}
141+
142+
async scrollUp(): Promise<void> {
143+
await this.specificText.scrollIntoViewIfNeeded();
144+
await this.chapterHeading.scrollIntoViewIfNeeded();
145+
}
146+
}
147+
148+
class PdfReaderPage extends WebReaderPage {
149+
async changeSettings(): Promise<void> {
150+
await this.settingsButton.click();
151+
await this.zoomInButton.click();
152+
await this.scrollingStyle.click();
153+
}
154+
155+
async getZoomValue(): Promise<number> {
156+
return await this.page.locator('canvas').evaluate((el) => {
157+
return Number(
158+
window.getComputedStyle(el).getPropertyValue('--scale-factor')
159+
);
160+
});
161+
}
162+
163+
async zoomIn(): Promise<void> {
164+
const beforeScaleFactor = await this.getZoomValue();
165+
await this.settingsButton.click();
166+
await this.zoomInButton.click();
167+
const afterScaleFactor = await this.getZoomValue();
168+
expect(afterScaleFactor).toBeGreaterThan(beforeScaleFactor);
169+
}
170+
171+
async zoomOut(): Promise<void> {
172+
const beforeScaleFactor = await this.getZoomValue();
173+
await this.settingsButton.click();
174+
await this.zoomOutButton.click();
175+
const afterScaleFactor = await this.getZoomValue();
176+
expect(afterScaleFactor).toBeLessThan(beforeScaleFactor);
177+
}
178+
179+
async scrollDown(): Promise<void> {
180+
await expect(this.pageTwo).toBeVisible();
181+
await this.pageTwo.scrollIntoViewIfNeeded();
182+
}
183+
184+
async scrollUp(): Promise<void> {
185+
await this.scrollDown();
186+
await expect(this.pageOne).toBeVisible();
187+
await this.pageOne.scrollIntoViewIfNeeded();
188+
}
189+
}
190+
191+
export { WebReaderPage, HtmlReaderPage, PdfReaderPage };

‎playwright/tests/html-reader-settings.spec.ts‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
import { test, expect } from '@playwright/test';
2+
import { HtmlReaderPage } from '../pageobjects/web-reader.page.ts';
3+
4+
test.describe('Test HTML pub', () => {
5+
test('Confirm reader settings are visible', async ({ page }) => {
6+
const htmlReaderPage = new HtmlReaderPage(page);
7+
await htmlReaderPage.loadPage('/html/moby-epub3');
8+
await expect(htmlReaderPage.fullScreenButton).toBeVisible();
9+
await htmlReaderPage.settingsButton.click();
10+
await expect(htmlReaderPage.defaultFont).toBeVisible();
11+
await expect(htmlReaderPage.serifFont).toBeVisible();
12+
await expect(htmlReaderPage.sansSerifFont).toBeVisible();
13+
await expect(htmlReaderPage.dyslexiaFont).toBeVisible();
14+
await expect(htmlReaderPage.whiteBackground).toBeVisible();
15+
await expect(htmlReaderPage.sepiaBackground).toBeVisible();
16+
await expect(htmlReaderPage.blackBackground).toBeVisible();
17+
await expect(htmlReaderPage.resetTextSize).toBeVisible();
18+
await expect(htmlReaderPage.decreaseTextSize).toBeVisible();
19+
await expect(htmlReaderPage.increaseTextSize).toBeVisible();
20+
await expect(htmlReaderPage.paginatedStyle).toBeVisible();
21+
await expect(htmlReaderPage.scrollingStyle).toBeVisible();
22+
});
23+
24+
test('Open and close reader settings', async ({ page }) => {
25+
const htmlReaderPage = new HtmlReaderPage(page);
26+
await htmlReaderPage.loadPage('/html/moby-epub3');
27+
await htmlReaderPage.settingsButton.click();
28+
await expect(htmlReaderPage.defaultFont).toBeVisible();
29+
await htmlReaderPage.settingsButton.click();
30+
await expect(htmlReaderPage.defaultFont).not.toBeVisible();
31+
});
32+
33+
test('Display default settings', async ({ page }) => {
34+
const htmlReaderPage = new HtmlReaderPage(page);
35+
await htmlReaderPage.loadPage('/html/moby-epub3');
36+
await htmlReaderPage.settingsButton.click();
37+
await expect(htmlReaderPage.defaultFont).toBeChecked();
38+
await expect(htmlReaderPage.whiteBackground).toBeChecked();
39+
await expect(await htmlReaderPage.getTextSize()).toBe('100%');
40+
await expect(htmlReaderPage.paginatedStyle).toBeChecked();
41+
});
42+
43+
test('Change font', async ({ page }) => {
44+
const htmlReaderPage = new HtmlReaderPage(page);
45+
await htmlReaderPage.loadPage('/html/moby-epub3');
46+
await htmlReaderPage.settingsButton.click();
47+
await htmlReaderPage.serifFont.click();
48+
await expect(htmlReaderPage.serifFont).toBeChecked();
49+
await htmlReaderPage.sansSerifFont.click();
50+
await expect(htmlReaderPage.sansSerifFont).toBeChecked();
51+
await htmlReaderPage.dyslexiaFont.click();
52+
await expect(htmlReaderPage.dyslexiaFont).toBeChecked();
53+
await htmlReaderPage.defaultFont.click();
54+
await expect(htmlReaderPage.defaultFont).toBeChecked();
55+
});
56+
57+
test('Change background color', async ({ page }) => {
58+
const htmlReaderPage = new HtmlReaderPage(page);
59+
await htmlReaderPage.loadPage('/html/moby-epub3');
60+
await htmlReaderPage.settingsButton.click();
61+
await htmlReaderPage.sepiaBackground.click();
62+
await expect(htmlReaderPage.sepiaBackground).toBeChecked();
63+
await htmlReaderPage.blackBackground.click();
64+
await expect(htmlReaderPage.blackBackground).toBeChecked();
65+
await htmlReaderPage.whiteBackground.click();
66+
await expect(htmlReaderPage.whiteBackground).toBeChecked();
67+
});
68+
69+
test('Change text size', async ({ page }) => {
70+
const htmlReaderPage = new HtmlReaderPage(page);
71+
await htmlReaderPage.loadPage('/html/moby-epub3');
72+
await htmlReaderPage.settingsButton.click();
73+
await htmlReaderPage.decreaseTextSize.click();
74+
await expect(await htmlReaderPage.getTextSize()).toBe('96%');
75+
await htmlReaderPage.resetTextSize.click();
76+
await htmlReaderPage.increaseTextSize.click();
77+
await expect(await htmlReaderPage.getTextSize()).toBe('104%');
78+
});
79+
80+
test('Change pagination style', async ({ page }) => {
81+
const htmlReaderPage = new HtmlReaderPage(page);
82+
await htmlReaderPage.loadPage('/html/moby-epub3');
83+
await htmlReaderPage.settingsButton.click();
84+
await htmlReaderPage.scrollingStyle.click();
85+
await expect(htmlReaderPage.scrollingStyle).toBeChecked();
86+
await htmlReaderPage.scrollDown();
87+
await htmlReaderPage.scrollUp();
88+
await expect(htmlReaderPage.settingsButton).toBeVisible();
89+
await htmlReaderPage.settingsButton.click();
90+
await htmlReaderPage.paginatedStyle.click();
91+
await expect(htmlReaderPage.paginatedStyle).toBeChecked();
92+
});
93+
94+
test('Stay on same page or chapter when change pagination style', async ({
95+
page,
96+
}) => {
97+
const htmlReaderPage = new HtmlReaderPage(page);
98+
await htmlReaderPage.loadPage('/html/moby-epub3');
99+
await htmlReaderPage.tocButton.click();
100+
await htmlReaderPage.chapterName.click();
101+
await htmlReaderPage.settingsButton.click();
102+
await htmlReaderPage.scrollingStyle.click();
103+
await expect(htmlReaderPage.chapterHeading).toBeVisible();
104+
await htmlReaderPage.paginatedStyle.click();
105+
await expect(htmlReaderPage.chapterHeading).toBeVisible();
106+
});
107+
108+
test('Maintain changed settings when exit and reenter reader', async ({
109+
page,
110+
}) => {
111+
const htmlReaderPage = new HtmlReaderPage(page);
112+
await htmlReaderPage.loadPage('/html/moby-epub3');
113+
await htmlReaderPage.changeSettings();
114+
await htmlReaderPage.backButton.click();
115+
await expect(htmlReaderPage.webReaderHomepage).toBeVisible();
116+
await htmlReaderPage.loadPage('/html/moby-epub3');
117+
await htmlReaderPage.settingsButton.click();
118+
await expect(htmlReaderPage.dyslexiaFont).toBeChecked();
119+
await expect(htmlReaderPage.sepiaBackground).toBeChecked();
120+
await expect(await htmlReaderPage.getTextSize()).toBe('104%');
121+
await expect(htmlReaderPage.scrollingStyle).toBeChecked();
122+
});
123+
124+
test('Maintain changed settings in other pubs', async ({ page }) => {
125+
const htmlReaderPage = new HtmlReaderPage(page);
126+
await htmlReaderPage.loadPage('/html/moby-epub3');
127+
await htmlReaderPage.changeSettings();
128+
await htmlReaderPage.loadPage('/html/moby-epub2');
129+
await htmlReaderPage.settingsButton.click();
130+
await expect(htmlReaderPage.dyslexiaFont).toBeChecked();
131+
await expect(htmlReaderPage.sepiaBackground).toBeChecked();
132+
await expect(await htmlReaderPage.getTextSize()).toBe('104%');
133+
await expect(htmlReaderPage.scrollingStyle).toBeChecked();
134+
});
135+
136+
test('Reset all reader settings', async ({ page }) => {
137+
const htmlReaderPage = new HtmlReaderPage(page);
138+
await htmlReaderPage.loadPage('/html/moby-epub3');
139+
await htmlReaderPage.changeSettings();
140+
await htmlReaderPage.resetTextSize.click();
141+
await expect(htmlReaderPage.defaultFont).toBeChecked();
142+
await expect(htmlReaderPage.whiteBackground).toBeChecked();
143+
await expect(await htmlReaderPage.getTextSize()).toBe('100%');
144+
await expect(htmlReaderPage.paginatedStyle).toBeChecked();
145+
});
146+
147+
test('Does not maintain changed settings for specific pub when exit and reenter reader', async ({
148+
page,
149+
}) => {
150+
const htmlReaderPage = new HtmlReaderPage(page);
151+
await htmlReaderPage.loadPage('/html/moby-epub3-no-local-storage');
152+
await htmlReaderPage.changeSettings();
153+
await htmlReaderPage.backButton.click();
154+
await expect(htmlReaderPage.webReaderHomepage).toBeVisible();
155+
await htmlReaderPage.loadPage('/html/moby-epub3-no-local-storage');
156+
await htmlReaderPage.settingsButton.click();
157+
await expect(htmlReaderPage.dyslexiaFont).not.toBeChecked();
158+
await expect(htmlReaderPage.sepiaBackground).not.toBeChecked();
159+
await expect(await htmlReaderPage.getTextSize()).not.toBe('104%');
160+
await expect(htmlReaderPage.scrollingStyle).not.toBeChecked();
161+
});
162+
163+
test('Open and exit full screen', async ({ page }) => {
164+
const htmlReaderPage = new HtmlReaderPage(page);
165+
await htmlReaderPage.loadPage('/html/moby-epub3');
166+
await htmlReaderPage.fullScreenButton.click();
167+
await htmlReaderPage.exitFullScreenButton.click();
168+
await expect(htmlReaderPage.fullScreenButton).toBeVisible();
169+
});
170+
171+
test('Change settings in full screen', async ({ page }) => {
172+
const htmlReaderPage = new HtmlReaderPage(page);
173+
await htmlReaderPage.loadPage('/html/moby-epub3');
174+
await htmlReaderPage.fullScreenButton.click();
175+
await htmlReaderPage.changeSettings();
176+
await expect(htmlReaderPage.dyslexiaFont).toBeChecked();
177+
await expect(htmlReaderPage.sepiaBackground).toBeChecked();
178+
await expect(await htmlReaderPage.getTextSize()).toBe('104%');
179+
await expect(htmlReaderPage.scrollingStyle).toBeChecked();
180+
});
181+
});

0 commit comments

Comments
 (0)