Spaces:
Runtime error
Runtime error
| import { chromium } from 'playwright'; | |
| // The port moves between runs; pass it in rather than editing this file. | |
| const BASE = process.env.STUDIO_URL ?? 'http://127.0.0.1:7910'; | |
| const b = await chromium.launch({ executablePath: '/opt/pw-browsers/chromium' }); | |
| const page = await b.newPage(); | |
| const fails = []; | |
| const check = (l, ok, extra) => { console.log((ok?' ok ':' FAIL ')+l+(ok||!extra?'':'\n '+extra)); if(!ok) fails.push(l); }; | |
| const errors = []; | |
| page.on('pageerror', (e) => errors.push(String(e))); | |
| await page.goto(`${BASE}/`, { waitUntil: 'domcontentloaded' }); | |
| await page.waitForSelector('#style-input', { timeout: 15000 }); | |
| await page.getByRole('button', { name: /Write or paste a score|Open the score editor/ }).click(); | |
| await page.waitForTimeout(400); | |
| const grid = page.locator('svg[aria-label="Note grid"]'); | |
| check('the grid opens by default', await grid.isVisible()); | |
| const notes = () => page.locator('rect[data-note]'); | |
| const mine = () => page.locator('rect[data-note][data-voice="0"]'); | |
| const before = await notes().count(); | |
| check('the skeleton renders as notes', before > 0, `count ${before}`); | |
| check('notation renders beside it', await page.locator('text=Notation').first().isVisible()); | |
| await page.waitForTimeout(900); | |
| const engraved = await page.locator('.console-scroll svg').count(); | |
| check('abcjs engraved something', engraved > 0, `${engraved} svg`); | |
| // The engraved staff was absolutely positioned and lay across the grid, | |
| // swallowing every click meant for a note. Test a note that is actually | |
| // inside the scroller's visible box, otherwise this only proves the note was | |
| // scrolled out of view. | |
| const topAtNote = await page.evaluate(() => { | |
| const scroll = document.querySelector('svg[aria-label="Note grid"]')?.parentElement; | |
| if (!scroll) return 'no scroller'; | |
| const view = scroll.getBoundingClientRect(); | |
| const note = [...document.querySelectorAll('rect[data-note]')].find((r) => { | |
| const b = r.getBoundingClientRect(); | |
| return b.top >= view.top && b.bottom <= view.bottom && b.left >= view.left && b.right <= view.right; | |
| }); | |
| if (!note) return 'no note in view'; | |
| const b = note.getBoundingClientRect(); | |
| const el = document.elementFromPoint(b.x + b.width / 2, b.y + b.height / 2); | |
| return el ? el.tagName + (el.getAttribute('data-note') ? '#note' : '') : 'null'; | |
| }); | |
| check('nothing overlays the notes', topAtNote === 'rect#note', `topmost was ${topAtNote}`); | |
| // --- read the ABC back out of the text view -------------------------------- | |
| const abcOf = async () => { | |
| await page.getByRole('button', { name: 'text', exact: true }).click(); | |
| const v = await page.locator('textarea[aria-label="Score as ABC notation"]').inputValue(); | |
| await page.getByRole('button', { name: 'notes', exact: true }).click(); | |
| await page.waitForTimeout(200); | |
| return v; | |
| }; | |
| const original = await abcOf(); | |
| check('text view shows ABC', original.includes('V:Vocal'), original.slice(0, 60)); | |
| // --- drag a note up -------------------------------------------------------- | |
| const first = mine().first(); | |
| const box = await first.boundingBox(); | |
| await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2); | |
| await page.mouse.down(); | |
| await page.mouse.move(box.x + box.width / 2, box.y - 13 * 2, { steps: 8 }); | |
| await page.mouse.up(); | |
| await page.waitForTimeout(250); | |
| const afterDrag = await abcOf(); | |
| check('dragging up changed the score', afterDrag !== original); | |
| check('drag did not destroy the voices', afterDrag.includes('V:Vocal') && afterDrag.includes('V:Ins')); | |
| check('headers survived the rewrite', afterDrag.includes('T:Your title') && afterDrag.includes('K:G')); | |
| // --- add a note by clicking empty grid ------------------------------------- | |
| const scroller = page.locator('div.console-scroll').filter({ has: grid }); | |
| const gb = await scroller.boundingBox(); | |
| const countBeforeAdd = await notes().count(); | |
| await page.mouse.click(gb.x + gb.width - 40, gb.y + gb.height - 30); | |
| await page.waitForTimeout(250); | |
| check('clicking empty grid adds a note', (await notes().count()) === countBeforeAdd + 1, `${countBeforeAdd} -> ${await notes().count()}`); | |
| // --- delete with the keyboard ---------------------------------------------- | |
| const countBeforeDelete = await notes().count(); | |
| await mine().first().focus(); | |
| await page.keyboard.press('Backspace'); | |
| await page.waitForTimeout(250); | |
| check('Backspace deletes the focused note', (await notes().count()) === countBeforeDelete - 1, `${countBeforeDelete} -> ${await notes().count()}`); | |
| // --- arrow keys nudge ------------------------------------------------------- | |
| await mine().first().focus(); | |
| const beforeNudge = await abcOf(); | |
| await mine().first().focus(); | |
| await page.keyboard.press('ArrowUp'); | |
| await page.waitForTimeout(250); | |
| check('arrow keys move a note without a mouse', (await abcOf()) !== beforeNudge); | |
| // --- paste a score and see it render --------------------------------------- | |
| await page.getByRole('button', { name: 'text', exact: true }).click(); | |
| const pasted = 'X:1\nT:Pasted\nM:3/4\nL:1/8\nK:D\nV:Lead\nD2 F2 A2 | d6 |'; | |
| await page.locator('textarea[aria-label="Score as ABC notation"]').fill(pasted); | |
| await page.getByRole('button', { name: 'notes', exact: true }).click(); | |
| await page.waitForTimeout(400); | |
| check('a pasted score renders in the grid', (await notes().count()) === 4, `got ${await notes().count()}`); | |
| check('its voice name is picked up', await page.getByRole('button', { name: 'Lead' }).isVisible()); | |
| // --- an unsupported score must refuse, not mangle -------------------------- | |
| await page.getByRole('button', { name: 'text', exact: true }).click(); | |
| await page.locator('textarea[aria-label="Score as ABC notation"]').fill('X:1\nM:4/4\nL:1/8\nK:C\nV:1\n(3CDE G4 |'); | |
| await page.getByRole('button', { name: 'notes', exact: true }).click(); | |
| await page.waitForTimeout(300); | |
| check('a tuplet is refused with an explanation', await page.getByText(/cannot draw without losing it/).isVisible()); | |
| await page.getByRole('button', { name: 'Edit it as text' }).click(); | |
| await page.waitForTimeout(200); | |
| check('the refused score is still intact in the text', (await page.locator('textarea[aria-label="Score as ABC notation"]').inputValue()).includes('(3CDE')); | |
| // --- the score shape that failed in the wild -------------------------------- | |
| // Chord symbols, repeats, two voices, and three octaves between the bass and | |
| // the top of the vocal. This used to be refused outright. | |
| const REAL = 'X:1\nT:Take\nM:4/4\nL:1/8\nQ:1/4=84\nK:E\nV:Vocal\n|: "G#m" B2 c2 B2 A2 | "E" e6 z2 :|\nV:Ins\n|: "G#m" E,,4 G,,4 | "E" E,,8 :|'; | |
| await page.getByRole('button', { name: 'text', exact: true }).click(); | |
| await page.locator('textarea[aria-label="Score as ABC notation"]').fill(REAL); | |
| await page.getByRole('button', { name: 'notes', exact: true }).click(); | |
| await page.waitForTimeout(500); | |
| check('a score with chord symbols is no longer refused', !(await page.getByText(/cannot draw without losing it/).isVisible().catch(() => false))); | |
| check('it renders as notes', (await notes().count()) > 0, `got ${await notes().count()}`); | |
| const chords = await page.locator('text[data-chord]').allTextContents(); | |
| check('chord symbols are drawn in the lane', chords.includes('G#m') && chords.includes('E'), chords.join(',')); | |
| // Every note of the instrument must exist, however far apart the parts are. | |
| const wanted = await page.evaluate(() => { | |
| const rects = [...document.querySelectorAll('rect[data-note]')]; | |
| const ys = rects.map((r) => Number(r.getAttribute('y'))); | |
| const svg = document.querySelector('svg[aria-label="Note grid"]'); | |
| return { count: rects.length, minY: Math.min(...ys), maxY: Math.max(...ys), svgHeight: Number(svg.getAttribute('height')) }; | |
| }); | |
| check('the keyboard spans every note, none clipped off', | |
| wanted.minY >= 0 && wanted.maxY < wanted.svgHeight, JSON.stringify(wanted)); | |
| const scrollState = await page.evaluate(() => { | |
| const box = document.querySelector('svg[aria-label="Note grid"]').parentElement; | |
| return { scrollHeight: box.scrollHeight, clientHeight: box.clientHeight }; | |
| }); | |
| check('the grid scrolls vertically rather than hiding the rest', | |
| scrollState.scrollHeight > scrollState.clientHeight, JSON.stringify(scrollState)); | |
| // --- playback --------------------------------------------------------------- | |
| await page.getByRole('button', { name: 'Play the score' }).click(); | |
| await page.waitForTimeout(700); | |
| const head = await page.locator('line[data-playhead]').count(); | |
| check('a playhead appears while playing', head === 1, `${head} playheads`); | |
| const firstX = await page.locator('line[data-playhead]').getAttribute('x1'); | |
| await page.waitForTimeout(700); | |
| const laterX = await page.locator('line[data-playhead]').getAttribute('x1').catch(() => null); | |
| check('the playhead advances', laterX !== null && Number(laterX) > Number(firstX), `${firstX} -> ${laterX}`); | |
| check('notes light up as they sound', (await page.locator('rect[data-sounding="yes"]').count()) > 0); | |
| await page.getByRole('button', { name: 'Stop' }).click(); | |
| await page.waitForTimeout(300); | |
| check('stopping clears the playhead', (await page.locator('line[data-playhead]').count()) === 0); | |
| // --- the notation pane must not clip its last system ------------------------ | |
| const staff = await page.evaluate(() => { | |
| const label = [...document.querySelectorAll('button')].find((b) => b.textContent.trim().startsWith('Notation')); | |
| const box = label?.parentElement?.querySelector('div.console-scroll'); | |
| if (!box) return null; | |
| const svg = box.querySelector('svg'); | |
| if (!svg) return { noSvg: true }; | |
| const b = box.getBoundingClientRect(), s = svg.getBoundingClientRect(); | |
| return { reachable: box.scrollHeight <= box.clientHeight + 1 || box.scrollHeight > box.clientHeight, boxH: b.height, svgH: s.height, scrollH: box.scrollHeight, clientH: box.clientHeight }; | |
| }); | |
| check('the notation pane can reach the bottom of the sheet', | |
| staff !== null && !staff.noSvg && staff.scrollH <= staff.clientH + 1 || (staff && staff.scrollH > staff.clientH), | |
| JSON.stringify(staff)); | |
| // The notation pane once overlapped the grid's lower strip, which still | |
| // scrolled and still showed notes but silently swallowed every click there. | |
| const overlap = await page.evaluate(() => { | |
| const svg = document.querySelector('svg[aria-label="Note grid"]'); | |
| const box = svg.parentElement.getBoundingClientRect(); | |
| const x = box.right - 40; | |
| const y = box.bottom - 8; | |
| const top = document.elementFromPoint(x, y); | |
| return { tag: top?.tagName ?? 'none', inGrid: Boolean(top && svg.contains(top)) }; | |
| }); | |
| check('nothing covers the bottom of the grid', overlap.inGrid, JSON.stringify(overlap)); | |
| check('no page errors throughout', errors.length === 0, errors.join('\n')); | |
| await b.close(); | |
| console.log(fails.length ? `\n${fails.length} FAILURES` : '\nall assertions passed'); | |
| process.exit(fails.length ? 1 : 0); | |