Full document, spreadsheet, slideshow, and diagram tooling
1import { test, expect } from '@playwright/test';
2import { createNewSheet, clickCell, typeInCell, getCellText, getFormulaBarValue } from './helpers';
3
4test.describe('Sheets - Basic', () => {
5 test.beforeEach(async ({ page }) => {
6 await createNewSheet(page);
7 });
8
9 test('grid renders with row and column headers', async ({ page }) => {
10 // Column headers (A, B, C...)
11 await expect(page.locator('thead th[data-col="1"]')).toContainText('A');
12 await expect(page.locator('thead th[data-col="2"]')).toContainText('B');
13 await expect(page.locator('thead th[data-col="3"]')).toContainText('C');
14
15 // Row headers (1, 2, 3...)
16 await expect(page.locator('th.row-header[data-row="1"]')).toContainText('1');
17 await expect(page.locator('th.row-header[data-row="2"]')).toContainText('2');
18 await expect(page.locator('th.row-header[data-row="3"]')).toContainText('3');
19 });
20
21 test('click cell to select it', async ({ page }) => {
22 await clickCell(page, 'B2');
23
24 // Cell address input should show B2
25 await expect(page.locator('#cell-address')).toHaveValue('B2');
26
27 // Cell should have selected class
28 await expect(page.locator('td[data-id="B2"]')).toHaveClass(/selected/);
29 });
30
31 test('type value and press Enter', async ({ page }) => {
32 await typeInCell(page, 'A1', 'Hello');
33
34 // Cell should display the value
35 const text = await getCellText(page, 'A1');
36 expect(text).toBe('Hello');
37 });
38
39 test('formula bar shows cell content when selected', async ({ page }) => {
40 await typeInCell(page, 'A1', 'Test Value');
41
42 // Click the cell to select it
43 await clickCell(page, 'A1');
44
45 // Formula bar should show the value
46 const barValue = await getFormulaBarValue(page);
47 expect(barValue).toBe('Test Value');
48 });
49
50 test('navigate with arrow keys', async ({ page }) => {
51 // Start at A1
52 await clickCell(page, 'A1');
53 await expect(page.locator('#cell-address')).toHaveValue('A1');
54
55 // Right arrow -> B1
56 await page.keyboard.press('ArrowRight');
57 await expect(page.locator('#cell-address')).toHaveValue('B1');
58
59 // Down arrow -> B2
60 await page.keyboard.press('ArrowDown');
61 await expect(page.locator('#cell-address')).toHaveValue('B2');
62
63 // Left arrow -> A2
64 await page.keyboard.press('ArrowLeft');
65 await expect(page.locator('#cell-address')).toHaveValue('A2');
66
67 // Up arrow -> A1
68 await page.keyboard.press('ArrowUp');
69 await expect(page.locator('#cell-address')).toHaveValue('A1');
70 });
71
72 test('Tab moves right, Enter moves down', async ({ page }) => {
73 await clickCell(page, 'A1');
74 await page.keyboard.type('One');
75 await page.keyboard.press('Tab');
76
77 // Should be at B1 now
78 await expect(page.locator('#cell-address')).toHaveValue('B1');
79
80 await page.keyboard.type('Two');
81 await page.keyboard.press('Enter');
82
83 // Enter moves down from the last Tab column -> B2
84 await expect(page.locator('#cell-address')).toHaveValue('B2');
85 });
86
87 test('double-click cell starts editing', async ({ page }) => {
88 await typeInCell(page, 'A1', 'Existing');
89
90 // Double-click to edit
91 await page.dblclick('td[data-id="A1"]');
92
93 // An input editor should appear inside the cell
94 const cellEditor = page.locator('td[data-id="A1"] .cell-editor');
95 await expect(cellEditor).toBeVisible({ timeout: 5000 });
96 expect(await cellEditor.inputValue()).toBe('Existing');
97 });
98
99 test('cell address input shows correct address', async ({ page }) => {
100 await clickCell(page, 'C5');
101 await expect(page.locator('#cell-address')).toHaveValue('C5');
102
103 await clickCell(page, 'Z1');
104 await expect(page.locator('#cell-address')).toHaveValue('Z1');
105 });
106
107 test('type numeric value', async ({ page }) => {
108 await typeInCell(page, 'A1', '42');
109 const text = await getCellText(page, 'A1');
110 expect(text).toBe('42');
111 });
112
113 test('multiple cells can hold different values', async ({ page }) => {
114 await typeInCell(page, 'A1', 'First');
115 await typeInCell(page, 'B1', 'Second');
116 await typeInCell(page, 'A2', 'Third');
117
118 expect(await getCellText(page, 'A1')).toBe('First');
119 expect(await getCellText(page, 'B1')).toBe('Second');
120 expect(await getCellText(page, 'A2')).toBe('Third');
121 });
122});