QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-05-21 07:45:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(playwright): inject data-test attrs via antd rowSelection

Browse Source 
`TableCollection` uses antd Table's `rowSelection` API, which renders
its own checkbox column. The `data-test="header-toggle-all"` and
`data-test="row-select-checkbox"` attributes in `ListView.tsx`'s
`bulkSelectColumnConfig` were processed by `mapColumns` but its `Header`
function was captured as a non-invoked ReactNode and its `Cell` received
a row missing react-table's prepared selection props — so neither
attribute actually reached the DOM.

Wrap antd's default checkbox nodes via `rowSelection.columnTitle` and
`rowSelection.renderCell` so the existing Playwright selectors resolve
against the real checkboxes that antd renders.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Joe Li
2026-05-20 14:45:00 -07:00
parent 1b66588cda
commit f14f393d1a
2 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
superset-frontend/packages/superset-ui-core/src/components/TableCollection/index.tsx
View File

@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { HTMLAttributes, memo, useMemo, useCallback } from 'react';
import { HTMLAttributes, ReactNode, memo, useMemo, useCallback } from 'react';
import {
ColumnInstance,
HeaderGroup,
@@ -196,6 +196,11 @@ function TableCollection<T extends object>({
const rowSelection: TableRowSelection | undefined = useMemo(() => {
if (!bulkSelectEnabled) return undefined;
// antd Table's `rowSelection` API renders its own checkbox column;
// wrap the header and per-row checkboxes with stable `data-test`
// attributes so Playwright selectors (which previously targeted
// `bulkSelectColumnConfig` in ListView — a column that no longer
// reaches the rendered DOM) can resolve them.
return {
selectedRowKeys,
onSelect: (record, selected) => {
@@ -204,6 +209,12 @@ function TableCollection<T extends object>({
onSelectAll: (selected: boolean) => {
toggleAllRowsSelected?.(selected);
},
columnTitle: (originNode: ReactNode) => (
<span data-test="header-toggle-all">{originNode}</span>
),
renderCell: (_value, _record, _index, originNode) => (
<span data-test="row-select-checkbox">{originNode}</span>
),
};
}, [
bulkSelectEnabled,

15
superset-frontend/playwright/components/ListView/BulkSelect.ts
View File

@@ -68,18 +68,15 @@ export class BulkSelect {
/**
* Enables bulk selection mode by clicking the toggle button.
*
* Waits for the bulk-select column header checkbox to be present in the
* DOM (state: 'attached') so the next row interaction does not race the
* table re-render that adds the checkbox column. We can't wait for
* 'visible' because `data-test="header-toggle-all"` ends up on antd's
* inner `<input>`, which renders with opacity:0 and a zero bounding box
* — never "visible" by Playwright's definition.
* Waits for the bulk-select column header to render so the next row
* interaction does not race the table re-render that adds the checkbox
* column. The `data-test="header-toggle-all"` attribute is on a wrapper
* span around antd's select-all checkbox (see `TableCollection`'s
* `rowSelection.columnTitle`), which is a real visible element.
*/
async enable(): Promise<void> {
await this.getToggleButton().click();
await this.page
.locator(BULK_SELECT_SELECTORS.HEADER_TOGGLE)
.waitFor({ state: 'attached' });
await this.page.locator(BULK_SELECT_SELECTORS.HEADER_TOGGLE).waitFor();
}
/**