fix(h5): center score stack, lock profile scroll and gate turn guidance
This commit is contained in:
@@ -6,7 +6,7 @@ import { execSync } from 'node:child_process';
|
||||
import { pathToFileURL, fileURLToPath } from 'node:url';
|
||||
const { chromium } = await import(pathToFileURL(execSync('npm root -g', { encoding: 'utf8' }).trim() + '/playwright/index.mjs').href);
|
||||
const base = process.env.H5_BASE_URL || 'http://127.0.0.1:8080/';
|
||||
const browser = await chromium.launch({ headless: true });
|
||||
const browser = await chromium.launch({ headless: true, args: ['--autoplay-policy=no-user-gesture-required'] });
|
||||
try {
|
||||
const page = await browser.newPage({ viewport: { width: 375, height: 726 } });
|
||||
page.setDefaultTimeout(60000);
|
||||
@@ -19,6 +19,37 @@ try {
|
||||
await page.route('**/sample-' + name, route => route.fulfill({ contentType: 'image/jpeg', body }));
|
||||
}
|
||||
await page.addInitScript(() => {
|
||||
// Record actual decoded audio starts, not preload requests. Include the
|
||||
// visible capture step so an early "turn left" instruction is detectable.
|
||||
const ids = new WeakMap(), buffers = new WeakMap(), originalFetch = window.fetch;
|
||||
window.__voice = [];
|
||||
window.fetch = function(url, options) {
|
||||
const match = String(url).match(/voice\/([a-z0-9-]+)\.mp3/);
|
||||
return originalFetch.call(this, url, options).then(response => {
|
||||
if (match) {
|
||||
const original = response.arrayBuffer.bind(response);
|
||||
response.arrayBuffer = () => original().then(data => { ids.set(data, match[1]); return data; });
|
||||
}
|
||||
return response;
|
||||
});
|
||||
};
|
||||
const OriginalAudioContext = window.AudioContext || window.webkitAudioContext;
|
||||
function AudioRecorder(...args) {
|
||||
const context = new OriginalAudioContext(...args), decode = context.decodeAudioData.bind(context);
|
||||
context.decodeAudioData = (data, ok, error) => decode(data, buffer => { buffers.set(buffer, ids.get(data)); if (ok) ok(buffer); }, error);
|
||||
const create = context.createBufferSource.bind(context);
|
||||
context.createBufferSource = () => {
|
||||
const source = create(), start = source.start.bind(source);
|
||||
source.start = (...args) => {
|
||||
window.__voice.push({ id: buffers.get(source.buffer), at: Date.now(), duration: source.buffer.duration * 1000, step: document.querySelector('#cam-step').textContent });
|
||||
return start(...args);
|
||||
};
|
||||
return source;
|
||||
};
|
||||
return context;
|
||||
}
|
||||
AudioRecorder.prototype = OriginalAudioContext.prototype;
|
||||
window.AudioContext = window.webkitAudioContext = AudioRecorder;
|
||||
const canvas = document.createElement('canvas'); canvas.width = 800; canvas.height = 600;
|
||||
let currentImage, offsetX = 0;
|
||||
function draw() {
|
||||
@@ -39,7 +70,7 @@ try {
|
||||
currentImage = image; offsetX = nextOffset; draw();
|
||||
} };
|
||||
navigator.mediaDevices.getUserMedia = async () => {
|
||||
await window.__cameraFixture.set('C3_180.jpg');
|
||||
await window.__cameraFixture.set('C3_135.jpg'); // invalid front: must not prompt a next-step turn
|
||||
return canvas.captureStream(10);
|
||||
};
|
||||
});
|
||||
@@ -78,6 +109,12 @@ try {
|
||||
};
|
||||
new MutationObserver(() => { window.__hints.push(document.querySelector('#cam-hint').textContent); if (window.__hints.length > 20) window.__hints.shift(); }).observe(document.querySelector('#cam-hint'), { childList: true, subtree: true });
|
||||
});
|
||||
await page.evaluate(() => window.__cameraFixture.set('C3_135.jpg'));
|
||||
await page.waitForFunction(() => window.__evaluations.some(row => row.target === 'front' && !row.ok && row.hint === '请正对屏幕'));
|
||||
await page.waitForFunction(() => window.__voice.some(row => row.id === 'hint-front'));
|
||||
assert((await page.locator('#cam-step').textContent()).includes('1/3'), 'invalid frontal angle never advances');
|
||||
assert.equal(await page.evaluate(() => window.__voice.some(row => /^hint-turn-|^step[23]-|^shot-done$/.test(row.id))), false, 'no turn/next-step/completion audio before a successful front photo');
|
||||
await page.evaluate(() => window.__cameraFixture.set('C3_180.jpg'));
|
||||
try { await page.waitForFunction(() => document.querySelector('#cam-step').textContent.includes('2/3')); }
|
||||
catch (error) {
|
||||
console.log(await page.evaluate(async () => {
|
||||
@@ -88,6 +125,11 @@ try {
|
||||
ratio: window.__dbgRatio, faces: faces.map(d => ({ score: d.detection.score, pose: HeadPose.estimate(d.landmarks.positions, false), box: d.detection.box })), holds: window.__holdSamples, hints: window.__hints };
|
||||
}).then(value => JSON.stringify(value, null, 2)), errors); throw error;
|
||||
}
|
||||
await page.waitForFunction(() => window.__voice.some(row => row.id === 'step2-rightface'));
|
||||
const firstVoice = await page.evaluate(() => window.__voice);
|
||||
const completion = firstVoice.find(row => row.id === 'shot-done'), turn = firstVoice.find(row => row.id === 'step2-rightface');
|
||||
assert(completion && turn && completion.step.includes('1/3') && turn.step.includes('2/3'));
|
||||
assert(turn.at >= completion.at + completion.duration - 100, 'turn instruction waits for captured-front completion speech to finish');
|
||||
await page.waitForFunction(() => window.__evaluations.some(row => row.target === 'right' && !row.ok));
|
||||
assert((await page.locator('#cam-step').textContent()).includes('2/3'), 'front photo cannot pass the side gate');
|
||||
await page.evaluate(() => window.__cameraFixture.set('C3_135.jpg'));
|
||||
@@ -112,5 +154,5 @@ try {
|
||||
assert(body.capture_diagnostics.views.right.yaw >= 30);
|
||||
assert(await page.evaluate(() => document.querySelector('#cam-video').srcObject === null), 'camera released after success');
|
||||
assert.deepEqual(errors, []);
|
||||
console.log('PASS: actual local models + automatic three-view capture + final JPEG revalidation; front/wrong-direction frames blocked locally; all three approved samples recorded; camera released; no paid call or backend writes');
|
||||
console.log('PASS: actual local models + automatic three-view capture + final JPEG revalidation; invalid front stays on step 1 with neutral audio, no early turn; actual decoded shot-done finishes before side guidance; wrong-direction frames blocked; approved samples/camera cleanup; no paid call/backend writes');
|
||||
} finally { await browser.close(); }
|
||||
|
||||
@@ -29,9 +29,15 @@ const check = (d, changes) => Quality.evaluate(d, { ...options, ...changes });
|
||||
assert(check(face()).ok);
|
||||
assert(!check(null).ok); assert(!check(face(), { count: 2 }).ok);
|
||||
for (const yaw of [-14, 14]) assert(check(face(yaw)).ok, 'former strict front limit now passes');
|
||||
for (const yaw of [-16, 16]) assert(!check(face(yaw)).ok);
|
||||
for (const yaw of [-16, 16, -45, 45]) {
|
||||
assert(!check(face(yaw)).ok);
|
||||
assert.equal(check(face(yaw)).hint, '请正对屏幕', 'front correction must not ask for a side view before capture');
|
||||
assert.equal(check(face(yaw), { mirrored: true }).hint, '请正对屏幕');
|
||||
}
|
||||
for (const pitch of [-17, 17]) assert(check(face(0, pitch)).ok);
|
||||
for (const pitch of [-20, 20]) assert(!check(face(0, pitch)).ok);
|
||||
for (const pitch of [-20, 20]) assert.equal(check(face(0, pitch)).hint, '请正对屏幕');
|
||||
assert.equal(check(face(0), { target: 'right' }).hint, '请向左转头', 'side step retains its proper turn instruction');
|
||||
assert.equal(check(face(0), { target: 'left' }).hint, '请向右转头');
|
||||
assert(check(face(0, 0, 12)).ok, 'normal tilt now passes');
|
||||
assert.equal(check(face(0, 0, 16)).hint, '请勿歪头');
|
||||
for (const yaw of [25, 72]) assert(!check(face(yaw), { target: 'right' }).ok);
|
||||
|
||||
@@ -6,7 +6,14 @@ const path = require('node:path');
|
||||
const source = fs.readFileSync(path.join(__dirname, '../js/app.js'), 'utf8');
|
||||
function extract(name) { return source.split('/* ' + name + '-begin */')[1].split('/* ' + name + '-end */')[0]; }
|
||||
const context = {};
|
||||
vm.runInNewContext(extract('camera-outline-pure') + extract('camera-haptic-pure'), context);
|
||||
vm.runInNewContext(extract('camera-outline-pure') + extract('camera-haptic-pure') + extract('camera-hint-stage-pure'), context);
|
||||
for (const hint of ['请向左转头', '请向右转头']) {
|
||||
assert.equal(context.captureStageHint(hint, 'front', false), '请正对屏幕');
|
||||
assert.equal(context.captureStageHint(hint, 'front', true), '请正对屏幕');
|
||||
assert.equal(context.captureStageHint(hint, 'right', false), '请正对屏幕');
|
||||
assert.equal(context.captureStageHint(hint, 'right', true), hint);
|
||||
}
|
||||
assert.equal(context.captureStageHint('请靠近一点', 'front', false), '请靠近一点');
|
||||
const geometry = { window: {} };
|
||||
vm.runInNewContext(fs.readFileSync(path.join(__dirname, '../js/camera-geometry.js'), 'utf8'), geometry);
|
||||
const original = JSON.stringify(geometry.window.CameraGeometry);
|
||||
|
||||
@@ -33,7 +33,7 @@ try {
|
||||
await page.route('**/*', route => {
|
||||
const req = route.request();
|
||||
if (req.method() !== 'GET') { blockedWrites.push(new URL(req.url()).pathname); return route.abort(); }
|
||||
if (/\.woff2?(\?|$)/.test(req.url())) return route.abort();
|
||||
if (!process.env.H5_PROFILE_FONTS && /\.woff2?(\?|$)/.test(req.url())) return route.abort();
|
||||
if (req.url().endsWith('/api/auth/session')) return route.fulfill({ json: { ok: true, user } });
|
||||
return route.continue();
|
||||
});
|
||||
@@ -66,6 +66,7 @@ try {
|
||||
await page.waitForTimeout(250);
|
||||
}
|
||||
await enter();
|
||||
if (process.env.H5_PROFILE_FONTS) await page.evaluate(() => document.fonts.ready);
|
||||
let blank = await values();
|
||||
assert.equal(blank.birth, ''); assert.equal(blank.gender, ''); assert.equal(blank.region, ''); assert.equal(blank.skin, 0);
|
||||
await pick('#pick-birth', [62, 10]); // current year minus 37, November
|
||||
@@ -133,11 +134,56 @@ try {
|
||||
const size = await geometry(); assert(Math.abs(await offset() + 3 * size.width) < 2, 'resize keeps selection aligned at ' + width);
|
||||
assert(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth), 'no horizontal page overflow');
|
||||
}
|
||||
for (const [width, height] of [[320, 568], [375, 667], [375, 726], [390, 664], [414, 896], [480, 726], [375, 440]]) {
|
||||
await page.setViewportSize({ width, height }); await page.waitForTimeout(400);
|
||||
const layout = await page.evaluate(() => {
|
||||
const profile = document.querySelector('#s-profile'), submit = document.querySelector('.btn-submit');
|
||||
const skin = document.querySelector('.skin-card').getBoundingClientRect();
|
||||
const image = document.querySelector('.skin-item img').getBoundingClientRect();
|
||||
const desc = document.querySelector('.skin-desc').getBoundingClientRect();
|
||||
const viewport = document.querySelector('#skin-carousel').getBoundingClientRect();
|
||||
const textBottom = Math.max(...[...document.querySelectorAll('.skin-desc')].map(el => {
|
||||
const range = document.createRange(); range.selectNodeContents(el);
|
||||
return Math.max(range.getBoundingClientRect().bottom, el.getBoundingClientRect().bottom);
|
||||
}));
|
||||
return { overflow: getComputedStyle(profile).overflowY, touch: getComputedStyle(profile).touchAction,
|
||||
client: profile.clientHeight, scroll: profile.scrollHeight, top: profile.scrollTop,
|
||||
submit: submit.getBoundingClientRect().bottom, image: image.height, desc: desc.bottom, skin: skin.bottom, textBottom, viewportBottom: viewport.bottom };
|
||||
});
|
||||
assert.equal(layout.overflow, 'hidden'); assert.equal(layout.touch, 'none');
|
||||
assert(layout.scroll <= layout.client + 1 && layout.submit <= height, 'all profile controls fit without clipping/scroll: ' + JSON.stringify({ width, height, ...layout }));
|
||||
assert(layout.image > 25 && layout.desc <= layout.skin, 'short screens retain skin illustration and description');
|
||||
assert(layout.textBottom <= layout.viewportBottom + 1, 'all five skin descriptions fit inside the clipped carousel: ' + JSON.stringify({ width, height, ...layout }));
|
||||
if (process.env.H5_ARTIFACT_DIR) {
|
||||
fs.mkdirSync(process.env.H5_ARTIFACT_DIR, { recursive: true });
|
||||
await page.screenshot({ path: path.join(process.env.H5_ARTIFACT_DIR, 'profile-fixed-' + width + '-' + height + '.png') });
|
||||
}
|
||||
const point = await geometry();
|
||||
await touch('touchStart', point.x, point.y);
|
||||
await touch('touchMove', point.x + 2, point.y + 70);
|
||||
await touch('touchEnd', 0, 0);
|
||||
await page.mouse.wheel(0, 300); await page.waitForTimeout(100);
|
||||
assert.equal(await page.locator('#s-profile').evaluate(el => el.scrollTop), 0, 'touch/wheel cannot pull the page down');
|
||||
assert.equal(await page.evaluate(() => document.documentElement.scrollTop), 0);
|
||||
await dragBy(-70); assert.equal((await values()).skin, 4, 'horizontal swipe still works after vertical gesture');
|
||||
await dragBy(70); assert.equal((await values()).skin, 3);
|
||||
}
|
||||
// The screen's scroll lock must not prevent the separate picker from moving.
|
||||
await page.click('#pick-birth'); await page.waitForTimeout(400);
|
||||
assert.equal(await page.locator('.ms-mobile-select.ms-show').evaluate(el => !!el.closest('#s-profile')), false);
|
||||
const wheel = page.locator('.ms-mobile-select.ms-show .ms-wheel').first(), wheelBox = await wheel.boundingBox();
|
||||
const wheelValue = await page.evaluate(() => window.__pickers['#pick-birth'].getCurValue());
|
||||
const wx = wheelBox.x + wheelBox.width / 2, wy = wheelBox.y + wheelBox.height / 2;
|
||||
await touch('touchStart', wx, wy);
|
||||
await touch('touchMove', wx, wy - 40); await touch('touchMove', wx, wy - 80);
|
||||
await touch('touchEnd', 0, 0); await page.waitForTimeout(300);
|
||||
assert.notDeepEqual(await page.evaluate(() => window.__pickers['#pick-birth'].getCurValue()), wheelValue, 'birth wheel still responds to real vertical touch');
|
||||
await page.click('.ms-mobile-select.ms-show .ms-cancel'); await page.waitForTimeout(300);
|
||||
await enter(); assert.equal((await values()).skin, 3, 'skin selection also survives reload');
|
||||
await page.click('[data-action="submit-profile"]');
|
||||
await page.waitForSelector('#p-photoguide.show');
|
||||
assert.deepEqual(errors, []); assert.deepEqual(blockedWrites, [], 'no backend writes or paid requests');
|
||||
console.log('PASS: actual profile defaults/wheels/reload/account isolation; real mobile touch follows finger/snap/flick/edges/cancel/vertical scroll; arrows/dots/keyboard; three responsive widths; submission; no JS errors/backend writes');
|
||||
console.log('PASS: actual profile defaults/wheels/reload/account isolation; real mobile finger-follow/snap/flick/edges/cancel; fixed profile/no vertical movement/controls fit in seven viewport sizes; real birth-wheel vertical touch still works; arrows/dots/keyboard/submission; no JS errors/backend writes');
|
||||
} finally {
|
||||
if (browser) await browser.close();
|
||||
if (child && child.exitCode == null) { const stopped = once(child, 'exit'); child.kill(); await stopped; }
|
||||
|
||||
@@ -33,21 +33,21 @@ try {
|
||||
for (const width of [320, 375, 390, 414, 480]) {
|
||||
await page.setViewportSize({ width, height: 844 });
|
||||
await page.waitForTimeout(400);
|
||||
for (const score of ['0', '75', '100', '--']) {
|
||||
for (const score of ['0', '75', '82', '100', '--']) {
|
||||
await page.locator('#stat-score b').evaluate((el, value) => { el.textContent = value; }, score);
|
||||
const layout = await page.evaluate(() => {
|
||||
const rect = selector => {
|
||||
const r = document.querySelector(selector).getBoundingClientRect();
|
||||
return { x: r.x, y: r.y, width: r.width, height: r.height, bottom: r.bottom };
|
||||
};
|
||||
return { dial: rect('.score-dial'), score: rect('#stat-score b'), title: rect('.sum-score > .stat-label'),
|
||||
ageTitle: rect('.sum-age > .stat-label'), age: rect('.age-dial'),
|
||||
return { dial: rect('.score-dial'), score: rect('#stat-score b'), title: rect('.ring-center .stat-label'),
|
||||
ageTitle: rect('.sum-age > .stat-label'), age: rect('#stat-age b'),
|
||||
careAlign: getComputedStyle(document.querySelector('.card-care .card-heading')).textAlign };
|
||||
});
|
||||
assert(Math.abs(layout.score.x + layout.score.width / 2 - layout.dial.x - layout.dial.width / 2) < 1, 'score horizontally centered: ' + width + '/' + score);
|
||||
assert(Math.abs(layout.score.y + layout.score.height / 2 - layout.dial.y - layout.dial.height / 2) < 1, 'score vertically centered');
|
||||
assert(layout.title.bottom < layout.dial.y && layout.ageTitle.bottom < layout.age.y, 'labels outside above their values');
|
||||
assert(Math.abs(layout.title.y - layout.ageTitle.y) < 1, 'labels share top alignment');
|
||||
assert(Math.abs((layout.title.y + layout.score.bottom) / 2 - layout.dial.y - layout.dial.height / 2) < 1, 'complete label + score stack vertically centered');
|
||||
assert(layout.title.y > layout.dial.y && layout.score.bottom < layout.dial.bottom, 'both label and score stay inside the circle');
|
||||
assert(Math.abs(layout.age.y - layout.ageTitle.bottom - 25) < 1, 'age label-to-number gap is exactly 25 CSS px');
|
||||
assert.equal(layout.careAlign, 'left');
|
||||
}
|
||||
assert(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth));
|
||||
@@ -127,5 +127,5 @@ try {
|
||||
await page.screenshot({ path: path.join(process.env.H5_ARTIFACT_DIR, 'report-summary.png') });
|
||||
}
|
||||
assert.deepEqual(errors, []); assert.deepEqual(writes, []);
|
||||
console.log('PASS: score centered/labels above/care left in five widths; real finger-following three report groups, flick/snap/cancel/vertical/edges/keyboard/zoom/resize/height/ARIA; smaller JPEG hashes/dimensions/MIME; no JS errors/backend writes');
|
||||
console.log('PASS: whole score stack centered inside circle/age gap 25px/care left in five widths; real finger-following three report groups, flick/snap/cancel/vertical/edges/keyboard/zoom/resize/height/ARIA; smaller JPEG hashes/dimensions/MIME; no JS errors/backend writes');
|
||||
} finally { await browser.close(); }
|
||||
|
||||
Reference in New Issue
Block a user