shkim4
6c61edadc1
- Story page Inner side margin: 16px up to a 480px viewport, linear to 60px at 768px, 60px beyond (no width jump) - Follow the 60px margins: Responsive 1920 row from a 2040px page (was 2000px); property compare 3 columns from 1125px, 2 columns from 787px (was 1080 / 720) - SW browser tests: drop the removed --sb-page-max-width override, compare thresholds 787 / 1125
545 lines
47 KiB
JavaScript
545 lines
47 KiB
JavaScript
// SW viewer mode verification (2026-10-19).
|
|
// 1) Captures the reference DWG/DXF viewer and the SW/Viewer Stories at the same resolution (1440 x 900).
|
|
// 2) Runs interaction checks on the Stories (menus, keyboard, Escape, outside click, panels, More, modal).
|
|
// Usage: node packages/sw/tests/viewer.browser.mjs <storybook-url> <reference-url|-> <out-dir>
|
|
// e.g. node packages/sw/tests/viewer.browser.mjs http://127.0.0.1:6034 http://127.0.0.1:5182 docs/sw/viewer-qa
|
|
import { mkdir, writeFile } from 'node:fs/promises'
|
|
import path from 'node:path'
|
|
import { runtimeRequire } from './playwright-runtime.mjs'
|
|
|
|
const require = runtimeRequire()
|
|
const { chromium } = require('playwright')
|
|
const [storybook, reference, outArg] = process.argv.slice(2)
|
|
const out = path.resolve(outArg ?? 'docs/sw/viewer-qa')
|
|
await mkdir(out, { recursive: true })
|
|
|
|
const browser = await chromium.launch({ headless: true, executablePath: process.env.SW_CHROME_PATH ?? 'C:/Program Files/Google/Chrome/Application/chrome.exe' })
|
|
const results = []
|
|
const check = (name, pass, detail = '') => { results.push({ name, result: pass ? 'PASS' : 'FAIL', detail }); console.log(`${pass ? 'PASS' : 'FAIL'} ${name}${detail ? ` — ${detail}` : ''}`) }
|
|
const errors = []
|
|
const story = id => `${storybook}/iframe.html?id=sw-viewer--${id}&viewMode=story${id === 'dropdowns' ? '&verification' : ''}`
|
|
const newPage = async (width = 1440, height = 900) => {
|
|
const page = await browser.newPage({ viewport: { width, height }, reducedMotion: 'reduce' })
|
|
page.on('pageerror', error => errors.push(`${page.url()}: ${error.message}`))
|
|
page.on('console', message => { if (message.type() === 'error' && !/favicon|404/.test(message.text())) errors.push(`${page.url()}: ${message.text()}`) })
|
|
return page
|
|
}
|
|
// 2026-10-23: waits for a visible header (the Responsive Story's first, 1920px row is hidden below a 2040px page).
|
|
// 2026-11-05: the Story page Inner is the page width minus 60px on each side from a 768px viewport (16px up to 480px,
|
|
// growing in between; story-page.css), so no envelope override is needed.
|
|
const open = async (page, id) => { await page.goto(story(id)); await page.waitForSelector('.hm-sw-viewer-header:visible'); await page.evaluate(() => document.fonts.ready); await page.waitForTimeout(200) }
|
|
const log = page => page.locator('[data-callback-log]').first().innerText()
|
|
const box = locator => locator.boundingBox()
|
|
|
|
// ---------- 1. Same-resolution captures ----------
|
|
const geometry = async (page, selectors) => page.evaluate(selectors => {
|
|
const header = document.querySelector(selectors.header)
|
|
const base = header.getBoundingClientRect()
|
|
return Object.fromEntries(Object.entries(selectors.parts).map(([name, selector]) => [name, [...(selectors.scoped ? header : document).querySelectorAll(selector)].map(element => {
|
|
const rect = element.getBoundingClientRect()
|
|
return { x: Math.round(rect.x - base.x), y: Math.round(rect.y - base.y), w: Math.round(rect.width), h: Math.round(rect.height), text: element.textContent.trim().slice(0, 12) }
|
|
})]))
|
|
}, selectors)
|
|
const parts = {
|
|
reference: { header: 'header', parts: { document: '.cad-toolbar-document', object: '.cad-toolbar-object-area', field: '.cad-toolbar-property-field', button: '.cad-toolbar [data-slot=button]', toggle: '.cad-toolbar [data-slot=toggle]', tab: '.cad-toolbar [data-slot=tabs-trigger]', switchField: '.cad-toolbar-switch-field' } },
|
|
package: { header: '.hm-sw-viewer-header', scoped: true, parts: { document: '.hm-sw-viewer-header__document', object: '.hm-sw-viewer-header__object', field: '.hm-sw-viewer-header__group[data-surface=field]', button: '.hm-sw-viewer-header__button:not([data-kind=toggle])', toggle: '.hm-sw-viewer-header__button[data-kind=toggle]', tab: '.hm-sw-viewer-header__tab', switchField: '.hm-sw-viewer-header__switch-field' } },
|
|
}
|
|
const comparison = {}
|
|
if (reference && reference !== '-') {
|
|
const page = await newPage()
|
|
await page.goto(reference)
|
|
await page.waitForSelector('header')
|
|
await page.evaluate(() => document.fonts.ready)
|
|
await page.screenshot({ path: path.join(out, 'reference-1440-idle.png'), clip: { x: 0, y: 0, width: 1440, height: 56 } })
|
|
await page.getByRole('button', { name: '샘플' }).click()
|
|
await page.screenshot({ path: path.join(out, 'reference-1440-sample-menu.png'), clip: { x: 0, y: 0, width: 1440, height: 200 } })
|
|
await page.getByRole('menuitem', { name: /평면 및 종단면도/ }).click()
|
|
await page.waitForFunction(() => document.querySelector('.cad-toolbar-filename')?.textContent?.includes('C0060202'), null, { timeout: 30000 })
|
|
await page.waitForTimeout(1500)
|
|
comparison.reference = await geometry(page, parts.reference)
|
|
await page.screenshot({ path: path.join(out, 'reference-1440-loaded.png'), clip: { x: 0, y: 0, width: 1440, height: 56 } })
|
|
await page.getByRole('button', { name: '레이어 패널' }).click()
|
|
await page.getByRole('button', { name: '옵션 패널' }).click()
|
|
await page.waitForTimeout(300)
|
|
await page.screenshot({ path: path.join(out, 'reference-1440-panels.png') })
|
|
await page.close()
|
|
}
|
|
{
|
|
const page = await newPage(1920, 1000)
|
|
await open(page, 'viewer-header')
|
|
// 2026-10-21: the Story also shows the minimize / close version below; the checks use the first (basic) frame.
|
|
const frame = page.locator('[data-viewer-frame]').first()
|
|
const origin = await box(frame)
|
|
comparison.package = await geometry(page, parts.package)
|
|
await page.screenshot({ path: path.join(out, 'package-1440-loaded.png'), clip: { x: origin.x, y: origin.y, width: 1440, height: 56 } })
|
|
// 2026-10-21: the samples are the file-name list (SWHeaderDocumentTitle), see viewer-logo-document-menu.browser.mjs.
|
|
await frame.locator('.hm-sw-viewer-header .hm-sw-viewer-header__document .hm-sw-header__document-button').click()
|
|
await page.screenshot({ path: path.join(out, 'package-1440-sample-menu.png'), clip: { x: origin.x, y: origin.y, width: 1440, height: 200 } })
|
|
await page.keyboard.press('Escape')
|
|
await frame.getByRole('button', { name: '레이어' }).click()
|
|
await frame.getByRole('button', { name: '설정' }).click()
|
|
await page.waitForTimeout(200)
|
|
await page.screenshot({ path: path.join(out, 'package-1440-panels.png'), clip: { x: origin.x, y: origin.y, width: 1440, height: 620 } })
|
|
await page.close()
|
|
}
|
|
// 2026-10-23: the Model / Layout buttons share one width (their field face widens up to 378px with room), so they and
|
|
// their field are left out of the size comparison with the reference. Height: the box matches the field group (42px), so the buttons are 37.5px (margin 1px top and sides, 1.5px bottom; geometry rounds to 38).
|
|
check('geometry tabs: equal widths, 37.5px high (box = field group 42px)', comparison.package.tab.length === 2 && comparison.package.tab.every(item => item.h === 38 && Math.abs(item.w - comparison.package.tab[0].w) <= 1), comparison.package.tab.map(item => `${item.w}x${item.h}`).join(' '))
|
|
if (comparison.reference) {
|
|
// Same item = same size (positions shift with the file-name text width, which differs by sample data).
|
|
const noTabs = items => items.filter(item => !item.text.startsWith('Model'))
|
|
for (const key of ['button', 'toggle', 'switchField', 'field']) {
|
|
const pick = key === 'field' ? noTabs : items => items
|
|
const a = pick(comparison.reference[key]).map(item => `${item.w}x${item.h}`), b = pick(comparison.package[key]).map(item => `${item.w}x${item.h}`)
|
|
// field (without the tabs field): same width, height within 1px.
|
|
const [ref, pkg] = [pick(comparison.reference[key]), pick(comparison.package[key])]
|
|
const within = key === 'field' ? ref.every((item, index) => pkg[index] && item.w === pkg[index].w && Math.abs(item.h - pkg[index].h) <= 1) : JSON.stringify(a) === JSON.stringify(b)
|
|
check(`geometry ${key} sizes equal to reference${key === 'field' ? ' (±1px height, known)' : ''}`, within, `reference ${a.join(' ')} / package ${b.join(' ')}`)
|
|
}
|
|
const [r, p] = [comparison.reference.document[0], comparison.package.document[0]]
|
|
// x differs by design: the reference always draws "HM" (72px cap); the package draws no logo unless given (24px cap).
|
|
check('geometry document well height / top (x: logo rule)', r.h === p.h && r.y === p.y && p.x === r.x - 48, `reference x${r.x} y${r.y} h${r.h} / package x${p.x} y${p.y} h${p.h}`)
|
|
}
|
|
|
|
// ---------- 2. Interactions ----------
|
|
{
|
|
// Wide enough for the 1440px story frame plus the story page padding (panels at the frame right edge stay on screen).
|
|
const page = await newPage(1920, 1000)
|
|
await open(page, 'viewer-header')
|
|
// 2026-10-21: the Story also shows the minimize / close version below; these checks use the first (basic) frame.
|
|
const root = page.locator('[data-viewer-frame]').first()
|
|
// Samples (2026-10-21): the file-name list (SWHeaderDocumentTitle) replaced the 샘플 menu button. Click opens, rows listed,
|
|
// Escape closes and returns focus; the logo menu (Open) is checked in viewer-logo-document-menu.browser.mjs.
|
|
const samples = page.locator('.hm-sw-viewer-header .hm-sw-viewer-header__document .hm-sw-header__document-button').first()
|
|
await samples.click()
|
|
const menu = root.getByRole('group', { name: '문서 목록' })
|
|
check('document list opens on click', await menu.isVisible())
|
|
check('document list has the 3 samples', (await menu.locator('.hm-sw-header__document-item').count()) === 3)
|
|
const menuBox = await box(menu), triggerBox = await box(samples)
|
|
check('list placed under the file name', menuBox.y >= triggerBox.y + triggerBox.height - 1, `list ${Math.round(menuBox.x)},${Math.round(menuBox.y)} name ${Math.round(triggerBox.x)},${Math.round(triggerBox.y + triggerBox.height)}`)
|
|
check('trigger shows open state', (await samples.getAttribute('aria-expanded')) === 'true' && (await samples.getAttribute('data-selected')) === 'true')
|
|
await page.keyboard.press('ArrowDown')
|
|
await page.keyboard.press('ArrowDown')
|
|
check('ArrowDown moves focus in the list', (await page.evaluate(() => document.activeElement?.textContent)).includes('평면'))
|
|
await page.keyboard.press('Escape')
|
|
check('Escape closes the list', !(await menu.isVisible().catch(() => false)))
|
|
check('Escape returns focus to the file name', await samples.evaluate(element => element === document.activeElement))
|
|
// Keyboard open + Enter select → file name changes, selection logged by the host.
|
|
await samples.press('ArrowDown')
|
|
check('ArrowDown opens with the first row focused', (await page.evaluate(() => document.activeElement?.classList.contains('hm-sw-header__document-item'))))
|
|
// 2026-10-21: no Open below the rows (file open is the header button); ArrowUp wraps to the last sample.
|
|
await page.keyboard.press('ArrowUp')
|
|
await page.keyboard.press('Enter')
|
|
check('Enter selects a sample (document changes)', (await page.locator('.hm-sw-viewer-header .hm-sw-viewer-header__document .hm-sw-header__document-name').first().innerText()) === 'simple.dxf')
|
|
check('onDocumentSelect reported', (await log(page)).includes('samples/sample-dxf'), await log(page))
|
|
// Outside click closes.
|
|
await samples.click()
|
|
await page.mouse.click(700, 600)
|
|
check('outside click closes the list', (await root.getByRole('group', { name: '문서 목록' }).count()) === 0)
|
|
// Tabs: arrow keys select.
|
|
const model = root.getByRole('radio', { name: /Model/ })
|
|
await model.focus()
|
|
await page.keyboard.press('ArrowRight')
|
|
check('tabs ArrowRight selects Layout', (await root.getByRole('radio', { name: /Layout/ }).getAttribute('aria-checked')) === 'true')
|
|
// Switch
|
|
const depth = root.getByRole('switch', { name: '2.5D' })
|
|
await depth.click()
|
|
check('header switch toggles', (await depth.getAttribute('aria-checked')) === 'true' && (await log(page)).includes('2.5d=true'))
|
|
// Hover (2026-10-21 rule, VIEWER.md: the #266651 face was removed): text / icon #FFC600, no face, same size and
|
|
// position. 전체 보기 left the header row for More, so the panel toggle is hovered.
|
|
const hovered = root.getByRole('button', { name: '레이어', exact: true })
|
|
const beforeHover = await box(hovered)
|
|
await hovered.hover()
|
|
const hoverStyle = await hovered.evaluate(element => { const style = getComputedStyle(element); return `${style.color} ${style.backgroundColor}` })
|
|
const afterHover = await box(hovered)
|
|
check('hover: #FFC600 text, no face, same box', hoverStyle === 'rgb(255, 198, 0) rgba(0, 0, 0, 0)' && JSON.stringify(beforeHover) === JSON.stringify(afterHover), `${hoverStyle} ${JSON.stringify(afterHover)}`)
|
|
await page.mouse.move(0, 0)
|
|
// Toggle opens the panel; Escape inside closes it and focus goes back.
|
|
const layers = root.getByRole('button', { name: '레이어', exact: true })
|
|
await layers.click()
|
|
const layerPanel = root.getByRole('dialog', { name: /레이어 \(/ })
|
|
check('toggle opens panel', await layerPanel.isVisible())
|
|
check('toggle pressed state + #FFC600', (await layers.getAttribute('aria-pressed')) === 'true' && (await layers.evaluate(element => getComputedStyle(element).color)) === 'rgb(255, 198, 0)')
|
|
check('panel focused on open', await layerPanel.evaluate(element => element.contains(document.activeElement)))
|
|
await page.keyboard.press('Escape')
|
|
check('Escape closes panel', (await root.getByRole('dialog', { name: /레이어 \(/ }).count()) === 0)
|
|
check('focus returns to toggle', await layers.evaluate(element => element === document.activeElement))
|
|
// Resize by the native corner (right after opening, top-end placement).
|
|
await layers.click()
|
|
const sized = await box(layerPanel)
|
|
await page.mouse.move(sized.x + sized.width - 6, sized.y + sized.height - 6)
|
|
await page.mouse.down()
|
|
await page.mouse.move(sized.x + sized.width - 63, sized.y + sized.height - 103, { steps: 6 })
|
|
await page.mouse.up()
|
|
const resized = await box(layerPanel)
|
|
check("corner resize changes size", resized.width < sized.width - 40 && resized.height < sized.height - 80, `${Math.round(sized.width)}x${Math.round(sized.height)} → ${Math.round(resized.width)}x${Math.round(resized.height)}`)
|
|
// Drag: title bar moves the panel and it stays inside the frame.
|
|
const before = await box(layerPanel)
|
|
const title = layerPanel.locator('.hm-sw-property__titlebar')
|
|
const titleBox = await box(title)
|
|
await page.mouse.move(titleBox.x + 40, titleBox.y + 15)
|
|
await page.mouse.down()
|
|
await page.mouse.move(titleBox.x - 260, titleBox.y + 45, { steps: 8 })
|
|
await page.mouse.up()
|
|
const after = await box(layerPanel)
|
|
check('drag moves panel', Math.round(before.x - after.x) === 300 && Math.round(after.y - before.y) === 30, `dx ${Math.round(after.x - before.x)} dy ${Math.round(after.y - before.y)}`)
|
|
await page.mouse.move(after.x + 40, after.y + 15)
|
|
await page.mouse.down()
|
|
await page.mouse.move(after.x + 3000, after.y + 3000, { steps: 6 })
|
|
await page.mouse.up()
|
|
const frame = await box(root.locator('.sw-viewer-story-canvas'))
|
|
const clamped = await box(layerPanel)
|
|
check('drag stays inside bounds (10px edge)', Math.round(frame.x + frame.width - (clamped.x + clamped.width)) === 10 && Math.round(frame.y + frame.height - (clamped.y + clamped.height)) === 10,
|
|
`right gap ${Math.round(frame.x + frame.width - (clamped.x + clamped.width))}, bottom gap ${Math.round(frame.y + frame.height - (clamped.y + clamped.height))}`)
|
|
// Collapse by button and double click.
|
|
await layerPanel.getByRole('button', { name: '접기' }).click()
|
|
check('collapse hides body', !(await layerPanel.locator('.hm-sw-property__body').isVisible()))
|
|
await title.dblclick({ position: { x: 30, y: 15 } })
|
|
check('title double click expands', await layerPanel.locator('.hm-sw-property__body').isVisible())
|
|
// Panel content works. 2026-10-22: per-layer bulb buttons (SWLayerVisibilityIcon) + one all-layers bulb on top
|
|
// (role="switch"; ON only when every layer is shown; a partial state reads OFF and a click shows all).
|
|
const face = locator => locator.evaluate(element => [getComputedStyle(element).backgroundColor, getComputedStyle(element).color].join(' '))
|
|
const allSwitch = layerPanel.getByRole('switch', { name: '전체 레이어' })
|
|
const switchOn = async () => (await allSwitch.getAttribute('aria-checked')) === 'true'
|
|
const hiddenRows = () => layerPanel.locator('li[data-visible="false"]').count()
|
|
check('layer rows use the header bulb icon', (await layerPanel.locator('li button .hm-sw-header__layer-icon--composite').count()) === (await layerPanel.locator('li').count()) && (await layerPanel.locator('li button svg').count()) === 0)
|
|
check('all-layers switch ON when all shown, no 전체 켜기 / 끄기 buttons', await switchOn() && (await layerPanel.getByRole('button', { name: /전체 (켜기|끄기)/ }).count()) === 0)
|
|
check('all-layers control is the bulb icon, no SWViewerSwitch', (await allSwitch.locator('.hm-sw-header__layer-icon--composite').count()) === 1 && (await layerPanel.locator('.hm-sw-viewer-switch').count()) === 0)
|
|
await layerPanel.getByRole('button', { name: 'CR-TEXT 숨기기' }).click()
|
|
check('panel content callback', (await log(page)).includes('layer:CR-TEXT=false'))
|
|
check('one layer hidden -> switch OFF (partial)', !(await switchOn()) && (await hiddenRows()) === 1)
|
|
await allSwitch.click()
|
|
check('partial + switch -> all shown, switch ON', await switchOn() && (await hiddenRows()) === 0)
|
|
await allSwitch.click()
|
|
check('switch OFF -> all hidden', !(await switchOn()) && (await hiddenRows()) === (await layerPanel.locator('li').count()))
|
|
for (const button of await layerPanel.locator('li button').all()) await button.click()
|
|
check('each layer shown again -> switch ON (synced)', await switchOn() && (await hiddenRows()) === 0)
|
|
// Close button hover face.
|
|
const close = layerPanel.getByRole('button', { name: '닫기' })
|
|
await close.hover()
|
|
check('close hover = SWPopup hover asset', await close.evaluate(element => getComputedStyle(element.querySelector('.hm-sw-property__close-hover')).visibility === 'visible' && getComputedStyle(element.querySelector('.hm-sw-property__close-default')).visibility === 'hidden'))
|
|
await close.click()
|
|
check('close button closes', (await root.getByRole('dialog', { name: /레이어 \(/ }).count()) === 0)
|
|
// Two panels: the last touched comes to the front.
|
|
await layers.click()
|
|
await root.getByRole('button', { name: '설정', exact: true }).click()
|
|
const options = root.getByRole('dialog', { name: '옵션' })
|
|
const z = async () => Promise.all([layerPanel, options].map(item => item.evaluate(element => Number(getComputedStyle(element).zIndex))))
|
|
await layerPanel.locator('.hm-sw-property__titlebar').click({ position: { x: 30, y: 15 } })
|
|
const [zl, zo] = await z()
|
|
check('last touched panel on top', zl > zo, `layer z ${zl}, options z ${zo}`)
|
|
// Modal popup: backdrop, focus trap, Escape.
|
|
await root.getByRole('button', { name: '정보 및 라이선스' }).click()
|
|
const about = root.getByRole('dialog', { name: /라이선스/ })
|
|
const confirm = about.getByRole('button', { name: '확인' })
|
|
await confirm.hover()
|
|
const confirmHover = await face(confirm)
|
|
check('라이선스 확인 hover = --hm-sw-viewer-hover face', confirmHover === 'rgb(38, 102, 81) rgb(255, 255, 255)', confirmHover)
|
|
await about.locator('.hm-sw-property__title').hover()
|
|
check('modal popup opens with backdrop', (await about.getAttribute('aria-modal')) === 'true' && (await page.locator('.hm-sw-viewer-panel-backdrop').count()) === 1)
|
|
for (let index = 0; index < 4; index++) await page.keyboard.press('Tab')
|
|
check('modal focus stays inside', await about.evaluate(element => element.contains(document.activeElement)))
|
|
await page.keyboard.press('Escape')
|
|
check('modal Escape closes', (await root.getByRole('dialog', { name: /라이선스/ }).count()) === 0)
|
|
await page.close()
|
|
}
|
|
{
|
|
// Submenus and the context menu.
|
|
const page = await newPage(1920, 1100)
|
|
await open(page, 'dropdowns')
|
|
await page.getByRole('button', { name: '도면' }).press('Enter')
|
|
const recent = page.getByRole('menuitem', { name: '최근 도면' })
|
|
await recent.focus()
|
|
await page.keyboard.press('ArrowRight')
|
|
const sub = page.getByRole('menu', { name: '최근 도면' })
|
|
check('ArrowRight opens submenu with focus', (await sub.isVisible()) && await sub.evaluate(element => element.contains(document.activeElement)))
|
|
const parentBox = await box(page.getByRole('menu', { name: '도면', exact: true })), subBox = await box(sub)
|
|
check('submenu opens to the side', subBox.x >= parentBox.x + parentBox.width, `parent right ${Math.round(parentBox.x + parentBox.width)}, sub left ${Math.round(subBox.x)}`)
|
|
await page.getByRole('menuitem', { name: '보관 도면' }).hover()
|
|
check('third level opens on hover', await page.getByRole('menu', { name: '보관 도면' }).isVisible())
|
|
await page.getByRole('menuitem', { name: '보관 도면' }).focus()
|
|
await page.keyboard.press('ArrowLeft')
|
|
check('ArrowLeft closes one level', (await page.getByRole('menu', { name: '최근 도면' }).count()) === 0 && (await page.getByRole('menu', { name: '도면', exact: true }).count()) === 1)
|
|
await page.getByRole('menuitemcheckbox', { name: '선가중치 표시' }).click()
|
|
check('checkbox entry toggles via onCommand', (await log(page)).includes('file/lineweight=true'), await log(page))
|
|
await page.getByRole('button', { name: '도면' }).click()
|
|
check('checkbox state reflected', (await page.getByRole('menuitemcheckbox', { name: '선가중치 표시' }).getAttribute('aria-checked')) === 'true')
|
|
await page.getByRole('menuitem', { name: '인쇄 (미연결)' }).click({ force: true })
|
|
check('disabled entry does nothing', (await page.getByRole('menu', { name: '도면', exact: true }).count()) === 1)
|
|
await page.keyboard.press('Escape')
|
|
const right = page.getByRole('button', { name: '오른쪽 정렬 메뉴' })
|
|
await right.click()
|
|
const rightMenu = page.getByRole('menu', { name: '오른쪽 정렬 메뉴' })
|
|
const [rb, rm] = [await box(right), await box(rightMenu)]
|
|
check('menuAlign end + menuWidth', Math.abs(rb.x + rb.width - (rm.x + rm.width)) <= 1 && Math.round(rm.width) === 220, `width ${Math.round(rm.width)}`)
|
|
await page.keyboard.press('Escape')
|
|
const area = page.locator('[data-context-area]')
|
|
const areaBox = await box(area)
|
|
await page.mouse.click(areaBox.x + 50, areaBox.y + 40, { button: 'right' })
|
|
const context = page.getByRole('menu', { name: '도면 메뉴' })
|
|
const contextBox = await box(context)
|
|
check('context menu opens at pointer', Math.abs(contextBox.x - (areaBox.x + 50)) <= 1 && Math.abs(contextBox.y - (areaBox.y + 40)) <= 1, `${Math.round(contextBox.x)},${Math.round(contextBox.y)}`)
|
|
await page.getByRole('menuitem', { name: '선택 확대' }).click()
|
|
check('context entry reported', (await log(page)).includes('context/zoom-selection'))
|
|
// Menu kept inside the viewport near the right edge.
|
|
await page.setViewportSize({ width: 900, height: 700 })
|
|
await page.mouse.click(0, 0)
|
|
await page.evaluate(() => window.scrollTo(0, 0))
|
|
await page.waitForTimeout(100)
|
|
await page.locator('.sw-story-scroller').first().evaluate(element => { element.scrollLeft = element.scrollWidth })
|
|
await right.click()
|
|
const edge = await box(page.getByRole('menu', { name: '오른쪽 정렬 메뉴' }))
|
|
check('menu stays inside the viewport', edge.x >= 4 && edge.x + edge.width <= 900 - 4, `left ${Math.round(edge.x)}, right ${Math.round(edge.x + edge.width)}`)
|
|
await page.close()
|
|
}
|
|
{
|
|
// Responsive: measured steps (full → icons only → More), no horizontal overflow; More collects the collapsed items.
|
|
// 2026-10-23: rows are picked by their data-width (not by position). The Story's 1920px row is hidden below a 2040px
|
|
// page (sw-story-responsive-hidden), so the page is 2500px wide and every row is shown at its own maximum width.
|
|
const page = await newPage(2500, 1200)
|
|
await open(page, 'responsive')
|
|
const row = width => page.locator(`[data-width="${width}"] .hm-sw-viewer-header`)
|
|
const report = []
|
|
for (const width of [1920, 1440, 1280, 950, 860, 760, 520]) {
|
|
const header = row(width)
|
|
check(`responsive ${width}px row shown`, await header.isVisible())
|
|
const info = await header.evaluate(element => {
|
|
const rect = node => node.getBoundingClientRect()
|
|
const parts = [element.querySelector('.hm-sw-viewer-header__document'), ...element.querySelectorAll('.hm-sw-viewer-header__object > [data-group], .hm-sw-viewer-header__more, .hm-sw-viewer-header__actions')].filter(Boolean).map(rect)
|
|
const overlaps = parts.some((a, i) => parts.slice(i + 1).some(b => Math.min(a.right, b.right) - Math.max(a.left, b.left) > 0.5))
|
|
const tabs = element.querySelector('.hm-sw-viewer-header__tabs')
|
|
const field = tabs?.parentElement
|
|
const tabWidths = tabs ? [...tabs.querySelectorAll('.hm-sw-viewer-header__tab')].map(tab => rect(tab).width) : []
|
|
// Name and count of a button never overlap and stay inside it (2026-10-26: narrow tabs ellipsize them, so their
|
|
// boxes are compared, not the full text).
|
|
const tabsFit = tabs ? [...tabs.querySelectorAll('.hm-sw-viewer-header__tab')].every(tab => {
|
|
const name = tab.querySelector('.hm-sw-viewer-header__tab-name'), count = tab.querySelector('.hm-sw-viewer-header__count'), box = rect(tab)
|
|
const shown = [name, count].filter(node => node && rect(node).width > 0)
|
|
return shown.every(node => rect(node).left >= box.left - 0.5 && rect(node).right <= box.right + 0.5)
|
|
&& (shown.length < 2 || rect(name).right <= rect(count).left + 0.5)
|
|
}) : true
|
|
return {
|
|
width: Math.round(rect(element).width),
|
|
overflow: element.scrollWidth - element.clientWidth,
|
|
objectOverflow: (() => { const object = element.querySelector('.hm-sw-viewer-header__object'); return object.scrollWidth - object.clientWidth })(),
|
|
overlaps,
|
|
outside: parts.some(part => part.right > rect(element).right + 0.5),
|
|
more: !!element.querySelector('.hm-sw-viewer-header__more'),
|
|
field: field ? Math.round(rect(field).width * 10) / 10 : null,
|
|
tabsEqual: tabWidths.every(width => Math.abs(width - tabWidths[0]) <= 0.5),
|
|
tabsFit,
|
|
// A switch caption with a shortLabel holds both texts; its full label is the one named here.
|
|
labels: [...element.querySelectorAll('.hm-sw-viewer-header__button, .hm-sw-viewer-header__tab, .hm-sw-viewer-header__switch-label')].map(item => (item.querySelector('.hm-sw-viewer-header__switch-label-full') ?? item).textContent.trim() || item.getAttribute('aria-label')),
|
|
// Buttons shown as icons only by the measured steps (name = aria-label / title) and labels drawn as text.
|
|
iconOnly: [...element.querySelectorAll('.hm-sw-viewer-header__button[data-icon-only=""]')].map(item => item.getAttribute('aria-label') || item.getAttribute('title') || item.textContent.trim()).sort(),
|
|
shownLabels: [...element.querySelectorAll('.hm-sw-viewer-header__label')].filter(item => rect(item).width > 0).map(item => item.textContent.trim()),
|
|
}
|
|
})
|
|
report.push({ rowWidth: width, ...info })
|
|
// Element capture: the lower rows are below the 1200px viewport (a page clip would fall outside the image).
|
|
await header.screenshot({ path: path.join(out, `package-responsive-${width}.png`) })
|
|
}
|
|
const at = width => report.find(item => item.rowWidth === width)
|
|
check('rows render at their own width', report.every(item => item.width === item.rowWidth), JSON.stringify(report.map(item => [item.rowWidth, item.width])))
|
|
check('no horizontal overflow, overlap or part outside the header at any row', report.every(item => item.overflow <= 0 && item.objectOverflow <= 1 && !item.overlaps && !item.outside), JSON.stringify(report.map(item => [item.rowWidth, item.overflow, item.objectOverflow, item.overlaps, item.outside])))
|
|
// 2026-10-23: the Model / Layout field widens with the free room up to 378px (1920: 378), narrower with less room at
|
|
// the same step (1920 → 1440, both with every label); the buttons always share one width and keep name + count apart.
|
|
// With this Story's content 1920 / 1440 / 1280 show every item (no More); narrower rows move collapseBelow items
|
|
// (Model / Layout included) into More by the measured steps.
|
|
check('Model / Layout field: 378px at 1920, at most 378px and narrower with less room (1920 → 1440)', at(1920).field === 378 && report.every(item => item.field === null || item.field <= 378) && at(1440).field <= at(1920).field, JSON.stringify(report.map(item => [item.rowWidth, item.field])))
|
|
// 1920 / 1440 (unchanged): every button with its label, none icon only.
|
|
check('1920 / 1440: 전체 보기 · 레이어 · 설정 · 속성 labelled, no icon-only button', [1920, 1440].every(width => !at(width).iconOnly.length && ['전체 보기', '레이어', '설정', '속성'].every(name => at(width).shownLabels.includes(name))), JSON.stringify([1920, 1440].map(width => [width, at(width).shownLabels, at(width).iconOnly])))
|
|
// 1280 (2026-10-23, user-approved): the status label keeps the width of its widest text (SWViewerStatus), so at 1280
|
|
// the measured icon step turns exactly the three panel toggles into icons; 전체 보기 keeps its label, nothing is in More.
|
|
check('1280: exactly 레이어 · 설정 · 속성 icon only, 전체 보기 labelled, no More', JSON.stringify(at(1280).iconOnly) === JSON.stringify(['레이어', '설정', '속성'].sort()) && at(1280).shownLabels.includes('전체 보기') && !['레이어', '설정', '속성'].some(name => at(1280).shownLabels.includes(name)) && !at(1280).more, JSON.stringify([at(1280).shownLabels, at(1280).iconOnly, at(1280).more]))
|
|
check('Model / Layout buttons equal, name and count never overlap', report.every(item => item.tabsEqual && item.tabsFit))
|
|
check('1920 / 1440 / 1280: every item in the header, no More', [1920, 1440, 1280].every(width => !at(width).more && at(width).field && ['전체 보기', '2.5D', '어두운 배경', '레이어'].every(name => at(width).labels.includes(name))))
|
|
// 950 sits at the edge of the measured steps (icons only or More, depending on the font rendering); both fit.
|
|
check('950: icons only or More', at(950).more || !(await row(950).locator('.hm-sw-viewer-header__label', { hasText: '레이어' }).count()))
|
|
// 2026-10-26 (user request): the file name gives way further (80px, below 560px 56px) and the Model / Layout tabs
|
|
// narrow with an ellipsis, so 950 / 860 / 760 / 520 keep every item in the header (no More).
|
|
check('950 / 860 / 760 / 520: every item in the header, icons only, no More', [950, 860, 760, 520].every(width => !at(width).more && at(width).field && ['Model', 'Layout', '전체 보기', '레이어'].every(name => at(width).labels.some(label => label.startsWith(name))))
|
|
&& !(await row(950).locator('.hm-sw-viewer-header__label', { hasText: '레이어' }).count()) && !(await row(520).locator('.hm-sw-viewer-header__label', { hasText: '레이어' }).count()), JSON.stringify([950, 860, 760, 520].map(width => [width, at(width).more, at(width).field])))
|
|
check('760: Model / Layout narrower than at 860', at(760).field < at(860).field, JSON.stringify([at(860).field, at(760).field]))
|
|
// Below 560px: counts hidden, 어두운 배경 shows its shortLabel 배경 (the full label stays the accessible name).
|
|
const narrow = await row(520).evaluate(element => ({
|
|
counts: [...element.querySelectorAll('.hm-sw-viewer-header__tab .hm-sw-viewer-header__count')].filter(node => node.getBoundingClientRect().width > 0).length,
|
|
captions: [...element.querySelectorAll('.hm-sw-viewer-header__switch-label')].map(label => [...label.children].filter(node => node.getBoundingClientRect().width > 1).map(node => node.textContent).join('')),
|
|
darkName: element.querySelector('.hm-sw-viewer-header__switch-label[data-short]')?.control?.labels?.[0]?.textContent,
|
|
}))
|
|
check('520: counts hidden, switch captions 2.5D / 배경', narrow.counts === 0 && JSON.stringify(narrow.captions) === JSON.stringify(['2.5D', '배경']), narrow)
|
|
check('no 파일 열기 / 샘플 header buttons at any width', report.every(item => !item.labels.includes('파일 열기') && !item.labels.includes('샘플')))
|
|
// 2026-10-23: a header first drawn wide and then narrowed in place (window resize) takes the same measured steps
|
|
// (icons, then More) without overflow, and gets every item back when widened again.
|
|
const resize = async (width, max) => page.evaluate(async ([width, max]) => {
|
|
const wrapper = document.querySelector(`[data-width="${width}"]`)
|
|
wrapper.style.maxWidth = max ? `${max}px` : ''
|
|
await new Promise(resolve => setTimeout(resolve, 400))
|
|
const header = wrapper.querySelector('.hm-sw-viewer-header')
|
|
return { overflow: header.scrollWidth - header.clientWidth, more: !!header.querySelector('.hm-sw-viewer-header__more'), labels: header.querySelectorAll('.hm-sw-viewer-header__object .hm-sw-viewer-header__label').length }
|
|
}, [width, max])
|
|
const shrink = []
|
|
for (const width of [1920, 1440]) {
|
|
for (const max of [1100, 1000, 900, 800, 520, 440]) shrink.push({ width, max, ...await resize(width, max) })
|
|
shrink.push({ width, max: 'restored', ...await resize(width, null) })
|
|
}
|
|
// 2026-10-26: More only once even the narrowest tabs do not fit (below about 520px).
|
|
check('in-place shrink: no overflow, no More down to 520, More at 440', shrink.every(item => item.overflow <= 0) && shrink.filter(item => typeof item.max === 'number' && item.max >= 520).every(item => !item.more) && shrink.filter(item => item.max === 440).every(item => item.more), JSON.stringify(shrink.map(item => [item.width, item.max, item.overflow, item.more])))
|
|
check('in-place grow back: every label back, no More', shrink.filter(item => item.max === 'restored').every(item => !item.more && item.labels === at(item.width).labels.filter(label => ['전체 보기', '레이어', '설정', '속성'].includes(label)).length), JSON.stringify(shrink.filter(item => item.max === 'restored')))
|
|
// The More menu: the 520 row narrowed in place to 400px, where Model / Layout move into More too (2026-10-26).
|
|
const narrowed = await resize(520, 400)
|
|
check('520 row narrowed to 400: More shown, no overflow', narrowed.more && narrowed.overflow <= 0, JSON.stringify(narrowed))
|
|
const more = row(520).getByRole('button', { name: '추가 도구' })
|
|
await more.click()
|
|
const moreMenu = page.getByRole('menu', { name: '추가 도구' })
|
|
const items = await moreMenu.locator('.hm-sw-viewer-menu__label, [role^=menuitem]').allInnerTexts()
|
|
check('More sections: 도면 공간, 화면 보기 (with 전체 보기); no 패널', ['도면 공간', '화면 보기', '전체 보기'].every(label => items.includes(label)) && !items.includes('패널'), items.join(' | '))
|
|
// 2026-10-21: the header dropdowns (More included) take the SWHeader `...` menu face (#0e3d2f); width unchanged.
|
|
check('More face (SWHeader ... menu #0e3d2f) 260px', (await moreMenu.evaluate(element => `${getComputedStyle(element).backgroundColor} ${element.offsetWidth}`)) === 'rgb(14, 61, 47) 260')
|
|
// Model / Layout inside More: radio items with their counts, the current value checked.
|
|
const radios = () => moreMenu.getByRole('menuitemradio').evaluateAll(entries => entries.map(entry => `${entry.textContent.trim()}=${entry.getAttribute('aria-checked')}`))
|
|
const initial = await radios()
|
|
check('More: Model / Layout radios with counts, Model checked', initial.length === 2 && /^Model.*17,377.*=true$/.test(initial[0]) && /^Layout.*237.*=false$/.test(initial[1]), JSON.stringify(initial))
|
|
await moreMenu.getByRole('menuitemcheckbox', { name: '2.5D' }).click()
|
|
check('More checkbox reports command', (await log(page)).includes('2.5d=true'), await log(page))
|
|
await more.click()
|
|
await page.getByRole('menuitemradio', { name: /Layout/ }).click()
|
|
check('More radio selects tab value', (await log(page)).includes('space=layout1'))
|
|
await more.click()
|
|
const switched = await radios()
|
|
check('More: Layout checked after the switch, counts kept', switched.length === 2 && /^Model.*17,377.*=false$/.test(switched[0]) && /^Layout.*237.*=true$/.test(switched[1]), JSON.stringify(switched))
|
|
check('wide rows follow the same value (Layout selected, counts kept)', (await row(1440).getByRole('radio', { name: /Layout/ }).getAttribute('aria-checked')) === 'true'
|
|
&& (await row(1440).locator('.hm-sw-viewer-header__count').allInnerTexts()).join('|') === '17,377|237')
|
|
await page.getByRole('menuitemradio', { name: /Model/ }).click()
|
|
check('More radio back to Model', (await log(page)).includes('space=model') && (await row(1440).getByRole('radio', { name: /Model/ }).getAttribute('aria-checked')) === 'true')
|
|
await page.screenshot({ path: path.join(out, 'package-responsive-more-open.png') })
|
|
await page.close()
|
|
}
|
|
{
|
|
// Story captures (full page) for the report.
|
|
const page = await newPage(1920, 1000)
|
|
for (const id of ['viewer-header', 'menu-groups', 'states', 'dropdowns', 'settings-panel', 'content-variants', 'variable-size', 'responsive', 'logo', 'compare-with-sw-header']) {
|
|
await open(page, id)
|
|
await page.screenshot({ path: path.join(out, `story-${id}.png`), fullPage: true })
|
|
}
|
|
// Mode switch keeps state.
|
|
await open(page, 'compare-with-sw-header')
|
|
await page.getByLabel('뷰어 모드 (SWViewerHeader)').check()
|
|
const frame = page.locator('[data-viewer-frame]').last()
|
|
check('mode switch shows viewer header', (await frame.locator('.hm-sw-viewer-header').count()) === 1 && (await frame.locator('.hm-sw-header').count()) === 0)
|
|
await frame.getByRole('button', { name: '레이어', exact: true }).click()
|
|
await frame.getByRole('button', { name: '임시 로고 (일반 모드로) 홈' }).click()
|
|
check('brand click returns to normal SWHeader', (await frame.locator('.hm-sw-header').count()) === 1 && (await frame.locator('.hm-sw-viewer-header').count()) === 0)
|
|
await page.getByLabel('뷰어 모드 (SWViewerHeader)').check()
|
|
check('state kept across mode switch (layer panel still open)', (await frame.getByRole('dialog', { name: /레이어 \(/ }).count()) === 1)
|
|
await page.close()
|
|
}
|
|
{
|
|
// Logo (2026-10-23 rule, VIEWER.md): no logo = no logo area at all (no cap, no slant, no width; the first part starts
|
|
// at the header edge). With a logo: the SWHeader home shape (shared .hm-sw-header__home-bg slant) around the logo,
|
|
// 11px + the 1px header border + logo + 36px wide (79px with the 32px example logo), overlapping the next part by 17px.
|
|
const page = await newPage(1920, 1000)
|
|
await open(page, 'logo')
|
|
const cases = page.locator('[data-logo-case]')
|
|
const read = index => cases.nth(index).evaluate(element => {
|
|
const header = element.querySelector('.hm-sw-viewer-header'), base = header.getBoundingClientRect()
|
|
const brand = header.querySelector('.hm-sw-viewer-header__brand'), mark = header.querySelector('.hm-sw-viewer-header__brand-mark')
|
|
const first = [...header.children].find(child => !child.matches('.hm-sw-viewer-header__brand, .hm-sw-viewer-header__logo-menu'))
|
|
return {
|
|
brand: !!brand, slant: !!brand?.querySelector('.hm-sw-header__home-bg'), text: brand?.textContent.trim() ?? '',
|
|
img: !!brand?.querySelector('img, .hm-sw-viewer-header__brand-mark svg'),
|
|
width: brand ? Math.round(brand.getBoundingClientRect().width) : 0, logoWidth: mark ? Math.round(mark.getBoundingClientRect().width) : 0,
|
|
logoX: mark ? Math.round(mark.getBoundingClientRect().x - base.x) : null,
|
|
firstX: Math.round(first.getBoundingClientRect().x - base.x), gap: parseFloat(getComputedStyle(header).columnGap),
|
|
height: Math.round(base.height),
|
|
fileOpenY: Math.round(header.querySelector('.hm-sw-viewer-header__button').getBoundingClientRect().y - base.y),
|
|
}
|
|
})
|
|
const [none, src, node] = [await read(0), await read(1), await read(2)]
|
|
check('logo none: no logo area (no cap, slant or text)', !none.brand && !none.slant && none.text === '' && !none.img, JSON.stringify(none))
|
|
check('logo none: first part starts at the header edge (no width left)', none.firstX === 1, JSON.stringify(none))
|
|
for (const [name, item] of [['logoSrc', src], ['logo element', node]]) {
|
|
check(`${name}: slanted cap (SWHeader home shape) with the logo`, item.brand && item.slant && item.img, JSON.stringify(item))
|
|
check(`${name}: cap = 11 + logo + 36 (79px with the 32px logo), logo 12px from the header edge`, item.width === 11 + item.logoWidth + 36 && item.logoX === 12, JSON.stringify(item))
|
|
check(`${name}: next part overlapped by 17px`, item.firstX === 1 + item.width - 17 + item.gap, JSON.stringify(item))
|
|
}
|
|
check('header height and menu row unchanged with / without logo', [none, src, node].every(item => item.height === 52 && item.fileOpenY === none.fileOpenY), [none, src, node].map(item => item.height + '/' + item.fileOpenY).join(' '))
|
|
{
|
|
// SWHeader keeps its 80px home area and slant with a logo (2026-10-26: its Logo story has no "로고 없음" case).
|
|
const sw = await newPage(1920, 1000)
|
|
await sw.goto(`${storybook}/iframe.html?id=sw-header--logo-slot&viewMode=story`)
|
|
await sw.waitForSelector('[data-logo-case] .hm-sw-header:visible')
|
|
const homes = await sw.locator('[data-logo-case] .hm-sw-header').evaluateAll(headers => headers.map(header => {
|
|
const home = header.querySelector('.hm-sw-header__home')
|
|
return { width: home ? Math.round(home.getBoundingClientRect().width) : 0, slant: !!home?.querySelector('.hm-sw-header__home-bg') }
|
|
}))
|
|
check('SWHeader: 80px home area and slant with a logo', homes.length === 2 && homes.every(home => home.width === 80 && home.slant), JSON.stringify(homes))
|
|
await sw.close()
|
|
}
|
|
for (const [index, name] of [[0, 'none'], [1, 'src'], [2, 'element']]) {
|
|
const b = await box(cases.nth(index))
|
|
await page.screenshot({ path: path.join(out, 'package-logo-' + name + '.png'), clip: { x: b.x, y: b.y, width: 520, height: 52 } })
|
|
}
|
|
// Text / icon outline: same tokens as SWHeader, fill unchanged.
|
|
const outline = await page.evaluate(() => {
|
|
const header = document.querySelector('[data-logo-case] .hm-sw-viewer-header')
|
|
const style = selector => getComputedStyle(header.querySelector(selector))
|
|
return {
|
|
// 2026-10-21: the file name is the SWHeader document button when `documents` is given (same outline token).
|
|
label: style('.hm-sw-viewer-header__label').textShadow, document: style('.hm-sw-viewer-header__document-name, .hm-sw-header__document-name').textShadow,
|
|
tab: style('.hm-sw-viewer-header__tab').textShadow, caption: style('.hm-sw-viewer-header__switch-label').textShadow,
|
|
count: style('.hm-sw-viewer-header__count').textShadow,
|
|
icon: (() => {
|
|
// A lucide (stroke) icon: since 2026-10-21 the first header icon is the More dots (fill), so take the 레이어 toggle.
|
|
const icon = header.querySelector('.hm-sw-viewer-header__button[data-kind="toggle"] .hm-sw-viewer-header__icon')
|
|
const copy = getComputedStyle(icon.querySelector('.hm-sw-viewer-icon__outline svg *')), glyph = getComputedStyle(icon.querySelector('.hm-sw-viewer-icon__glyph svg *'))
|
|
// lucide 24-unit icon drawn at 16px: 1px each side = 1.5 units, so the copy is 2 + 3 units.
|
|
return { filter: getComputedStyle(icon).filter, copyStroke: copy.stroke, copyWidth: parseFloat(copy.strokeWidth), glyphStroke: glyph.stroke, glyphWidth: parseFloat(glyph.strokeWidth) }
|
|
})(),
|
|
labelColor: style('.hm-sw-viewer-header__label').color,
|
|
labelFont: [style('.hm-sw-viewer-header__label').fontSize, style('.hm-sw-viewer-header__label').fontWeight, style('.hm-sw-viewer-header__label').letterSpacing].join(' '),
|
|
}
|
|
})
|
|
const blacks = value => value.split('rgb(0, 0, 0)').length - 1
|
|
check('text outline 1.3px black on 14px text (label / file name / tab)', [outline.label, outline.document, outline.tab].every(value => value.includes('rgb(0, 0, 0) 1.3px 0px 0px') && blacks(value) === 16), outline.label.slice(0, 60))
|
|
check('label outline 1px black on 11px captions / counts', [outline.caption, outline.count].every(value => value.includes('rgb(0, 0, 0) 1px 0px 0px') && blacks(value) === 16), outline.caption.slice(0, 60))
|
|
check('icon outline: SVG stroke copy, no CSS filter', outline.icon.filter === 'none' && outline.icon.copyStroke === 'rgb(0, 0, 0)' && outline.icon.copyWidth === outline.icon.glyphWidth + 3 && outline.icon.glyphStroke !== 'rgb(0, 0, 0)', JSON.stringify(outline.icon))
|
|
// 2026-10-20 user request: header labels (파일열기 · 샘플 · 전체보기 · 레이어 · 설정 · 속성), file name and Model / Layout are Bold (700).
|
|
check('fill / size / weight / spacing kept (labels Bold 700 since 2026-10-20)', outline.labelColor === 'rgb(255, 255, 255)' && outline.labelFont === '14px 700 normal', outline.labelColor + ' ' + outline.labelFont)
|
|
await page.close()
|
|
}
|
|
{
|
|
// SWHeader vs SWViewerHeader text / icon outline at 3x for the report.
|
|
const page = await browser.newPage({ viewport: { width: 1920, height: 1000 }, deviceScaleFactor: 3 })
|
|
await open(page, 'compare-with-sw-header')
|
|
const sw = await box(page.locator('.hm-sw-header').first()), vw = await box(page.locator('.hm-sw-viewer-header').first())
|
|
await page.screenshot({ path: path.join(out, 'outline-swheader-3x.png'), clip: { x: sw.x, y: sw.y, width: 760, height: sw.height } })
|
|
await page.screenshot({ path: path.join(out, 'outline-viewer-3x.png'), clip: { x: vw.x, y: vw.y, width: 760, height: vw.height } })
|
|
await page.screenshot({ path: path.join(out, 'outline-viewer-right-3x.png'), clip: { x: vw.x + 1000, y: vw.y, width: 440, height: vw.height } })
|
|
const hovered = page.locator('.hm-sw-viewer-header').first().getByRole('button', { name: '레이어', exact: true })
|
|
await hovered.hover()
|
|
check('hover changes fill only (outline kept)', (await hovered.locator('.hm-sw-viewer-header__label').evaluate(element => getComputedStyle(element).textShadow)).includes('1.3px'))
|
|
await page.close()
|
|
const states = await browser.newPage({ viewport: { width: 1920, height: 900 }, deviceScaleFactor: 2 })
|
|
await open(states, 'states')
|
|
const header = await box(states.locator('.hm-sw-viewer-header'))
|
|
await states.getByRole('button', { name: '기본' }).hover()
|
|
await states.screenshot({ path: path.join(out, 'outline-states-2x.png'), clip: { x: header.x, y: header.y, width: 1440, height: header.height } })
|
|
const disabled = await states.getByRole('button', { name: 'Disabled', exact: true }).evaluate(element => [getComputedStyle(element).opacity, getComputedStyle(element.querySelector('.hm-sw-viewer-header__label')).textShadow.includes('1.3px')])
|
|
check('disabled fades text + outline together', disabled[0] === '0.6' && disabled[1] === true, JSON.stringify(disabled))
|
|
await states.close()
|
|
}
|
|
{
|
|
// Storybook sidebar: SW/Tool removed; SW/Popup (common SWPopup examples), SW/Header and SW/Viewer remain.
|
|
const index = await (await fetch(storybook + '/index.json')).json()
|
|
const titles = [...new Set(Object.values(index.entries).map(entry => entry.title).filter(title => title.startsWith('SW')))]
|
|
check('SW/Tool removed from the sidebar', !titles.includes('SW/Tool'), titles.join(', '))
|
|
check('SW/Popup, SW/Header and SW/Viewer remain', ['SW/Popup', 'SW/Header', 'SW/Viewer'].every(title => titles.includes(title)))
|
|
}
|
|
check('no page errors', errors.length === 0, errors.join(' | '))
|
|
await browser.close()
|
|
await writeFile(path.join(out, 'report.json'), JSON.stringify({ storybook, reference, comparison, results, errors }, null, 2) + '\n')
|
|
const failed = results.filter(item => item.result === 'FAIL').length
|
|
console.log(`\n${results.length - failed}/${results.length} PASS`)
|
|
process.exit(failed ? 1 : 0)
|