xiaoshu-app/scripts/check-three-tap-reading-browser.mjs

// Local production build + isolated API fixtures. Never sends requests to production.
import { chromium } from 'playwright';
import { createServer } from 'node:http';
import { readFileSync, existsSync, mkdirSync, writeFileSync } from 'node:fs';
import { resolve, extname } from 'node:path';
import assert from 'node:assert/strict';
const root=resolve('dist/xiaoshu-mobile/browser');
const out=resolve(process.env.THREE_TAP_QA_DIR || '/tmp/xiaoshu-three-tap-browser');mkdirSync(out,{recursive:true});
const server=createServer((req,res)=>{
 let file=resolve(root,'.'+decodeURIComponent(new URL(req.url,'http://local').pathname));
 if(!file.startsWith(root+'/')||!existsSync(file)||!extname(file))file=root+'/index.html';
 res.setHeader('Content-Type',({'.html':'text/html','.js':'text/javascript','.css':'text/css','.svg':'image/svg+xml'})[extname(file)]||'application/octet-stream');res.end(readFileSync(file));
});
await new Promise(done=>server.listen(0,'127.0.0.1',done));const origin='http://127.0.0.1:'+server.address().port;
const browser=await chromium.launch({headless:true,executablePath:'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'});
const words=['apple','banana','orange','pear','grape','peach','melon','lemon','mango','plum'].map((Title,i)=>({GeneralID:701+i,NodeID:811,Title,sy:['苹果','香蕉','橙子','梨','葡萄','桃子','甜瓜','柠檬','芒果','李子'][i],yb:'/wɜːd/',yp:origin+'/fixtures/'+(701+i)+'.wav',w_learned:0}));
const wav=Buffer.alloc(44+3200);wav.write('RIFF');wav.writeUInt32LE(wav.length-8,4);wav.write('WAVEfmt ',8);wav.writeUInt32LE(16,16);wav.writeUInt16LE(1,20);wav.writeUInt16LE(1,22);wav.writeUInt32LE(16000,24);wav.writeUInt32LE(32000,28);wav.writeUInt16LE(2,32);wav.writeUInt16LE(16,34);wav.write('data',36);wav.writeUInt32LE(3200,40);
words[0]={...words[0],Title:'characteristically',sy:'典型地；具有特征地；用于验证较长中文释义在右侧区域换行'};
const report=[];
async function until(check,message){for(let i=0;i<100;i++){if(await check())return;await new Promise(r=>setTimeout(r,50));}throw Error(message);}
try{
 for(const entry of ['course','coach-wordbook','student-wordbook']){
  const errors=[],calls=[];const teacher=entry!=='student-wordbook';
  const context=await browser.newContext({viewport:{width:375,height:812},hasTouch:true,reducedMotion:'reduce'});
  await context.addInitScript(({teacher})=>{
   localStorage.setItem('xiaoshu.angular.session',JSON.stringify({token:'r:local-three-tap-fixture',user:{userId:teacher?300:100,groupId:teacher?3:1,honeyName:'本地测试'},student:teacher?{userId:100,groupId:1,honeyName:'测试学员'}:null}));
   HTMLMediaElement.prototype.play=function(){window.__lastAudio=this.src;return Promise.resolve();};
   HTMLMediaElement.prototype.load=function(){};
  },{teacher});
  await context.route('**/*',async route=>{
   const url=new URL(route.request().url());if(url.origin!==origin)return route.abort();
   if(url.pathname.startsWith('/fixtures/'))return route.fulfill({body:wav,contentType:'audio/wav'});
   if(!url.pathname.startsWith('/cloud-functions/'))return route.continue();
   const {params:p}=route.request().postDataJSON();calls.push(p);let result=[],page;
   if(p.action==='app_session_validate')result={valid:true};
   else if(p.action==='app_live_versions')result={version:'1',scopeVersions:{},syncStatus:{state:'current'}};
   else if(p.action==='e_user_list')result=[{userId:100,honeyName:'测试学员'}];
   else if(p.action==='e_ck_list'){result=words;page={itemCount:10,pageCount:1,passCounts:[10,0,0,0],bookPassCounts:[10,0,0,0]};}
   else if(p.action==='e_words_list'){result=words.map((w,i)=>({GeneralID:601+i,xxcs:1,detail:[w]}));page={itemCount:10,pageCount:1,pendingCount:10,completedCount:0};}
   else if(p.action==='stu_record_update_v2')result={batchId:p.batchId,batchVersion:1,learned:0};
   else if(p.action==='content_list'&&p.orders==='NEWID()')result=Array.from({length:8},(_,i)=>({GeneralID:9000+i,Title:'external'+i,sy:'外部释义'+i}));
   else if(p.action==='app_word_audio_ensure')result={state:'ready',url:origin+'/fixtures/'+p.wordId+'.wav'};
   return route.fulfill({json:{retcode:0,result,...(page?{page}:{})}});
  });
  const page=await context.newPage();
  const settle=()=>page.evaluate(()=>new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve))));
  page.on('pageerror',e=>errors.push(e.message));
  await page.goto(origin+(entry==='course'?'/pages/stu/stu_abc?nids=811&pnid=801&orderId=901':'/pages/member/starshop'+(teacher?'?wordbookStudentId=100':'')));
  const select=entry==='course'?'.word-select-check':'.word-select-list > button';
  await page.locator(select).first().waitFor();assert.equal(await page.locator(select).count(),10);
  for(const button of await page.locator(select).all())await button.click();
  await page.locator('.selection-header .primary-button').click();await page.locator('.repeat-list > button').first().waitFor();
  assert.equal(await page.locator('.repeat-list > button').count(),6,'existing six-word grouping');
  const row=()=>page.locator('.repeat-list > button').first();
  const firstWord=await row().locator('strong').innerText();const firstMeaning=words.find(w=>w.Title===firstWord).sy;
  // Actual mouse hold/left drag; generated click must not consume a reading tap.
  let box=await row().boundingBox();await page.mouse.move(box.x+box.width-30,box.y+25);await page.mouse.down();await new Promise(r=>setTimeout(r,480));await page.mouse.move(box.x+box.width-90,box.y+25,{steps:4});await page.mouse.up();
  assert.equal(await row().locator('.study-answer').innerText(),firstMeaning);assert.equal(await row().locator('.repeat-dots .done').count(),0);
  await row().click();await settle();assert.equal(await row().locator('.study-answer').count(),0);assert.equal(await row().locator('.repeat-dots .done').count(),1);
  // Real touch gesture via CDP, including native scroll cancellation on vertical movement.
  const cdp=await context.newCDPSession(page);box=await row().boundingBox();
  const touch=async(type,x,y)=>cdp.send('Input.dispatchTouchEvent',{type,touchPoints:type==='touchEnd'?[]:[{x,y}]});
  await touch('touchStart',box.x+box.width-30,box.y+25);await new Promise(r=>setTimeout(r,480));await touch('touchMove',box.x+box.width-90,box.y+25);await touch('touchEnd');await settle();
  assert.equal(await row().locator('.study-answer').innerText(),firstMeaning);assert.equal(await row().locator('.repeat-dots .done').count(),1);
  await page.getByRole('button',{name:'重新乱序',exact:true}).click();await settle();assert.equal(await page.locator('.study-answer').count(),0);assert.equal(await page.locator('.repeat-dots .done').count(),0);
  await page.setViewportSize({width:375,height:420});await page.evaluate(()=>window.scrollTo(0,0));await settle();
  box=await row().boundingBox();
  const scrollPosition=()=>page.evaluate(()=>window.scrollY+Array.from(document.querySelectorAll('*')).reduce((n,e)=>n+e.scrollTop,0));
  const beforeScroll=await scrollPosition();
  await touch('touchStart',box.x+box.width/2,box.y+35);
  for(let offset=15;offset<=100;offset+=15){await touch('touchMove',box.x+box.width/2,box.y+35-offset);await new Promise(r=>setTimeout(r,20));}
  await touch('touchEnd');await settle();
  assert.ok(await scrollPosition()>beforeScroll,'vertical touch still scrolls');
  assert.equal(await page.locator('.study-answer').count(),0);assert.equal(await page.locator('.repeat-dots .done').count(),0);
  await page.setViewportSize({width:375,height:812});await page.evaluate(()=>window.scrollTo(0,0));await settle();
  let readingTaps=0;
  for(const groupSize of [6,4]){
   for(const step of [1,2,3]){
    assert.match(await page.locator('.stage-banner').innerText(),new RegExp('第 '+step+' / 3 轮'));
    assert.equal(await page.locator('.study-answer').count(),0);assert.equal(await page.locator('.study-phonetic').count(),0);
    const sequence=await page.locator('.study-headword').allTextContents();
    for(let index=0;index<groupSize;index++){
     const target=page.locator('.repeat-list > button').nth(index);const word=words.find(w=>(step===3?w.sy:w.Title)===sequence[index]);assert.ok(word);
     await target.click();await settle();readingTaps++;assert.equal(await target.locator('.study-answer').count(),0);
     assert.equal(await target.locator('.study-phonetic').count(),step===3?0:1);
     await target.click();await settle();readingTaps++;assert.equal(await target.locator('.study-answer').innerText(),step===3?word.Title:word.sy);
     if((index===0||word.GeneralID===701)&&groupSize===6){
      for(const width of [320,375,768]){
       await page.setViewportSize({width,height:900});
       const geometry=await target.evaluate(el=>{const head=el.querySelector('.study-headword'),answer=el.querySelector('.study-answer'),hints=el.querySelector('.study-hints');const a=head.getBoundingClientRect(),b=hints.getBoundingClientRect();return {headSize:getComputedStyle(head).fontSize,answerSize:getComputedStyle(answer).fontSize,right:b.x>=a.right,overflow:document.documentElement.scrollWidth>innerWidth};});
       assert.equal(geometry.headSize,geometry.answerSize);assert.ok(geometry.right);assert.equal(geometry.overflow,false);
       await page.screenshot({path:out+'/'+entry+'-round-'+step+'-'+width+(word.GeneralID===701?'-long':'')+'.png'});
      }
      await page.setViewportSize({width:375,height:812});
     }
     await target.click();await settle();readingTaps++;
     if(index<groupSize-1){assert.equal(await target.locator('.study-answer').count(),0);assert.equal(await target.locator('.repeat-dots .done').count(),3);}
    }
   }
   await page.waitForURL('**/pages/stu/stu3**');
   for(let i=0;i<groupSize;i++){
    const title=await page.locator('.match-grid > div').first().locator('button').first().innerText();const word=words.find(w=>w.Title===title);
    await page.locator('.match-grid > div').first().getByRole('button',{name:title,exact:true}).click();
    await page.locator('.match-grid > div').nth(1).getByRole('button',{name:word.sy,exact:true}).click();await settle();
   }
   await page.getByRole('button',{name:'进入听音识意'}).click();await page.waitForURL('**/pages/stu/stu4**');
   for(let i=0;i<groupSize;i++){
    await until(async()=>/\/fixtures\/7\d+\.wav$/.test(await page.evaluate(()=>window.__lastAudio||'')),'listening audio');
    const src=await page.evaluate(()=>window.__lastAudio),id=Number(src.match(/(\d+)\.wav$/)[1]),word=words.find(w=>w.GeneralID===id);assert.ok(word);
    await page.evaluate(()=>window.__lastAudio='');
    await page.locator('.option-list').getByRole('button',{name:word.sy,exact:true}).click();await settle();
   }
   await page.getByRole('button',{name:'进入组合拼写'}).click();await page.waitForURL(teacher?'**/pages/stu/pl_stu5**':'**/pages/stu/stu5**');
   for(let i=0;i<groupSize;i++){
    const meaning=await page.locator('.spelling-card p').innerText(),word=words.find(w=>w.sy===meaning);assert.ok(word);
    for(const letter of word.Title){await page.locator('.letter-grid button:enabled').filter({hasText:new RegExp('^'+letter+'$')}).first().click();await settle();}
    await page.locator('.sticky-actions .primary-button').click();await settle();
   }
   if(groupSize===6){await page.getByRole('button',{name:'学习下一组单词'}).click();await page.locator('.repeat-list > button').first().waitFor();assert.equal(await page.locator('.repeat-list > button').count(),4);}
  }
  assert.equal(readingTaps,90);assert.deepEqual(errors,[]);
  report.push({entry,passed:true,readingTaps,groups:[6,4],roundsPerGroup:3,stages:['point reading','matching','listening','spelling'],mouseAndTouchSwipe:true,verticalScroll:true,longLabels:true,widths:[320,375,768],productionRequests:0});
  await context.close();
 }
 writeFileSync(out+'/results.json',JSON.stringify({environment:'local production build with isolated API and audio fixtures',report},null,2));console.log(JSON.stringify(report,null,2));
}finally{await browser.close();await new Promise(done=>server.close(done));}