Table practice · Match scorecard

Cricket scorecard — find the highest score

Two-innings batting card. Each table.ci-scorecard-table follows div.fill-translucent-hover with the team name. Column 3 (the runs cell) holds the score for every batter; the last two rows are Extras and Total — skip them when extracting.

Northern Stallions · Batting · 1st innings

258/9 (50)

Batter	Dismissal	R	B	4s	6s
Aarav Sharmaopening	c & b Iyer	72	54	9	1
Vivaan Kulkarniopening	lbw b Patel	14	20	2	0
Rohan Mehta	c Hegde b Khan	41	38	5	1
Devansh Kapoor	not out	88	71	7	3
Karthik Menoncaptain	run out (Banerjee)	23	19	3	0
Manav Goyal	b Patel	3	8	0	0
Yash Bhatwk	c Iyer b Khan	11	14	1	0
Extras		6	(b 1, lb 2, w 3)
Total		258	9 wkts · 50 ov · RR 5.16

Coastal Ravens · Batting · 1st innings

231 all out (47.4)

Batter	Dismissal	R	B	4s	6s
Ananya Iyeropening	b Reddy	5	11	1	0
Aisha Banerjeeopening	c Mehta b Goyal	67	52	8	2
Tara Hegdecaptain	c sub b Bhat	104	88	10	4
Priya Nair	lbw b Reddy	12	15	2	0
Neha Patel	c Sharma b Goyal	26	22	3	0
Sara Kapoor	b Goyal	9	13	1	0
Nisha Guptawk	not out	4	7	0	0
Extras		4	(lb 1, w 2, nb 1)
Total		231	all out · 47.4 ov · RR 4.84

table=table.ci-scorecard-table (2 instances) scope=table:has-text('Batting') | div.fill-translucent-hover ancestor score column=tbody td:nth-child(3) excluded rows=tr.row-extras + tr.row-total (skip last 2 with length - 2) data-testid=innings-northern · innings-coastal · total-northern · total-coastal

No computation yet.

What students should practise

Scope to the right team via div:has-text('Northern Stallions') ~ table or XPath ancestor traversal.
Read every score using table:has-text('Batting') tbody td:nth-child(3).
Drop the last two rows (Extras + Total), parseInt remaining cells, find max.
Cross-check with locator('tr:not(.row-extras):not(.row-total) td:nth-child(3)').
Assert highest score for Coastal Ravens equals 104 (Tara Hegde).

Playwright solutionBoth the CSS and the XPath traversal flavours. Show solution

import { Browser, chromium, Page } from '@playwright/test';

(async () => {
  const browser: Browser = await chromium.launch({ headless: false, channel: 'chrome' });
  const page: Page = await browser.newPage();
  await page.goto('/playwright/tables/scorecard.html');

  // XPath: anchor on the team name, walk up to the article, jump to its table
  const allScoresXPath: string[] = await page
    .locator("//span[text()='Northern Stallions']/ancestor::article//table[contains(@class,'ci-scorecard-table')]//tr/td[3]")
    .allInnerTexts();

  // CSS — first table that mentions Batting
  const allScores: string[] = await page
    .locator("table:has-text('Batting')").first()
    .locator("tbody td:nth-child(3)")
    .allInnerTexts();

  console.log(allScores);

  // drop the last two cells (Extras + Total), parse, sort descending
  const scoreVals: number[] = [];
  for (let i = 0; i < allScores.length - 2; i++) {
    scoreVals.push(parseInt(allScores[i], 10));
  }
  scoreVals.sort((a, b) => b - a);

  console.log('highest score: ' + scoreVals[0]);   // 88
})();