devsam/core2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test(frontend): 모바일 터치 드래그 좌표를 안정화

Browse Source
This commit is contained in:
Hide_D
2026-08-21 02:34:41 +00:00
parent c5debc9037
commit 349a9d3673
3 changed files with 83 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/e2e/npcPolicy.spec.ts
-1
View File
@@ -344,7 +344,6 @@ test('physical mobile touch reorders NPC priority across active and inactive lis
const nationPanel = mobilePage.locator('.priority-panel').first();
const activeList = nationPanel.locator('.priority-column').nth(1).locator('.priority-list');
const activeRows = activeList.locator('.priority-item');
await expect(activeRows.first()).toHaveCSS('touch-action', 'none');
await touchDrag(
mobilePage,
activeRows.nth(0),
app/game-frontend/e2e/touchDrag.ts
+83 -31
View File
@@ -9,15 +9,27 @@ type TouchDragOptions = {
targetYRatio?: number;
};
const pointIn = async (locator: Locator, yRatio = 0.5): Promise<TouchPoint> => {
const box = await locator.boundingBox();
if (!box) {
throw new Error('Touch drag target has no visible bounding box');
const pointInStable = async (locator: Locator, yRatio = 0.5): Promise<TouchPoint> => {
let previous: TouchPoint | null = null;
for (let attempt = 0; attempt < 5; attempt += 1) {
await locator.evaluate(
() => new Promise<void>((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())))
);
const box = await locator.boundingBox();
if (!box) {
throw new Error('Touch drag target has no visible bounding box');
}
const point = {
x: box.x + box.width / 2,
y: box.y + box.height * yRatio,
};
if (previous && Math.abs(previous.x - point.x) < 0.25 && Math.abs(previous.y - point.y) < 0.25) {
return point;
}
previous = point;
}
return {
x: box.x + box.width / 2,
y: box.y + box.height * yRatio,
};
if (!previous) throw new Error('Touch drag target did not produce a stable point');
return previous;
};
export const touchDrag = async (
@@ -26,25 +38,66 @@ export const touchDrag = async (
target: Locator,
options: TouchDragOptions = {}
): Promise<void> => {
await source.scrollIntoViewIfNeeded();
await target.scrollIntoViewIfNeeded();
const from = await pointIn(source);
const to = await pointIn(target, options.targetYRatio);
const cdp = await page.context().newCDPSession(page);
await page.evaluate(() => {
document.documentElement.removeAttribute('data-playwright-touch-trusted');
document.addEventListener(
'touchstart',
(event) => document.documentElement.setAttribute('data-playwright-touch-trusted', String(event.isTrusted)),
{ capture: true, once: true }
);
});
let from: TouchPoint | null = null;
let to: TouchPoint | null = null;
for (let attempt = 0; attempt < 2; attempt += 1) {
await source.scrollIntoViewIfNeeded();
await target.scrollIntoViewIfNeeded();
from = await pointInStable(source);
to = await pointInStable(target, options.targetYRatio);
await page.evaluate(() => {
for (const element of document.querySelectorAll('[data-playwright-touch-source]')) {
element.removeAttribute('data-playwright-touch-source');
}
});
await source.evaluate((element) => element.setAttribute('data-playwright-touch-source', ''));
await page.evaluate(() => {
document.documentElement.removeAttribute('data-playwright-touch-trusted');
document.documentElement.removeAttribute('data-playwright-touch-source-hit');
document.addEventListener(
'touchstart',
(event) => {
const sourceElement = document.querySelector('[data-playwright-touch-source]');
document.documentElement.setAttribute('data-playwright-touch-trusted', String(event.isTrusted));
document.documentElement.setAttribute(
'data-playwright-touch-source-hit',
String(event.target instanceof Node && sourceElement?.contains(event.target))
);
},
{ capture: true, once: true }
);
});
await cdp.send('Input.dispatchTouchEvent', {
type: 'touchStart',
touchPoints: [{ ...from, id: 0, radiusX: 1, radiusY: 1, force: 1 }],
});
await page.waitForTimeout(50);
const startState = await page.evaluate(() => ({
trusted: document.documentElement.getAttribute('data-playwright-touch-trusted') === 'true',
sourceHit: document.documentElement.getAttribute('data-playwright-touch-source-hit') === 'true',
}));
if (!startState.trusted) {
throw new Error('Chromium did not dispatch a trusted touchstart event');
}
if (startState.sourceHit) break;
await cdp.send('Input.dispatchTouchEvent', { type: 'touchCancel', touchPoints: [] });
await page.evaluate(() => {
for (const element of document.querySelectorAll('[data-playwright-touch-source]')) {
element.removeAttribute('data-playwright-touch-source');
}
});
from = null;
to = null;
}
if (!from || !to) {
throw new Error('Trusted touchstart did not land on the requested drag source');
}
await cdp.send('Input.dispatchTouchEvent', {
type: 'touchStart',
touchPoints: [{ ...from, id: 0, radiusX: 1, radiusY: 1, force: 1 }],
});
await page.waitForTimeout(50);
const dispatchMove = async (ratio: number) => {
await cdp.send('Input.dispatchTouchEvent', {
type: 'touchMove',
@@ -68,10 +121,9 @@ export const touchDrag = async (
}
await page.waitForTimeout(50);
await cdp.send('Input.dispatchTouchEvent', { type: 'touchEnd', touchPoints: [] });
const trusted = await page.evaluate(
() => document.documentElement.getAttribute('data-playwright-touch-trusted') === 'true'
);
if (!trusted) {
throw new Error('Chromium did not dispatch a trusted touchstart event');
}
await page.evaluate(() => {
for (const element of document.querySelectorAll('[data-playwright-touch-source]')) {
element.removeAttribute('data-playwright-touch-source');
}
});
};
app/game-frontend/src/components/ui/SortableStringList.ts
-2
View File
@@ -105,8 +105,6 @@ export default defineComponent({
cloneVNode(node, {
key: element,
[SORTABLE_ITEM_ATTRIBUTE]: element,
// Prevent a long-list touch gesture from being cancelled as page scrolling.
style: [node.props?.style, { touchAction: 'none' }],
})
)
);