Skip to content

feat: support URL sources upload to portal #1235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hanna-skryl merged 4 commits into from
Feb 4, 2026
Merged

feat: support URL sources upload to portal #1235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0279e87
feat(core,ci): support URL sources upload to portal
hanna-skryl Feb 3, 2026
512c0fe
refactor(plugin-axe): use structured check messages
hanna-skryl Feb 3, 2026
6c3dff0
fix(plugin-axe): update e2e snapshot for new message format
hanna-skryl Feb 3, 2026
6fe2ae5
test(plugin-axe): add coverage for multi-check issues
hanna-skryl Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions e2e/plugin-axe-e2e/tests/__snapshots__/collect.e2e.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -497,7 +497,7 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
"details": {
"issues": [
{
"message": "[\`body > button\`] Fix any of the following: Element does not have inner text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> Element's default semantics were not overridden with role="none" or role="presentation"",
"message": "Element does not have inner text that is visible to screen readers",
"severity": "error",
"source": {
"selector": "body > button",
Expand Down Expand Up @@ -528,7 +528,7 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
"details": {
"issues": [
{
"message": "[\`.low-contrast\`] Fix any of the following: Element has insufficient color contrast of 1.57 (foreground color: #777777, background color: #999999, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1",
"message": "Element has insufficient color contrast of 1.57 (foreground color: #777777, background color: #999999, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1",
"severity": "error",
"source": {
"selector": ".low-contrast",
Expand Down Expand Up @@ -624,7 +624,7 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
"details": {
"issues": [
{
"message": "[\`div[role="button"]\`] Fix any of the following: Invalid ARIA attribute name: aria-invalid-attribute",
"message": "Invalid ARIA attribute name: aria-invalid-attribute",
"severity": "error",
"source": {
"selector": "div[role=\"button\"]",
Expand All @@ -648,7 +648,7 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
"details": {
"issues": [
{
"message": "[\`img\`] Fix any of the following: Element does not have an alt attribute aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element's default semantics were not overridden with role="none" or role="presentation"",
"message": "Element does not have an alt attribute",
"severity": "error",
"source": {
"selector": "img",
Expand All @@ -670,7 +670,7 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
"details": {
"issues": [
{
"message": "[\`a\`] Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute",
"message": "Element is in tab order and does not have accessible text",
"severity": "error",
"source": {
"selector": "a",
Expand Down
8 changes: 4 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"private": true,
"dependencies": {
"@axe-core/playwright": "^4.11.0",
"@code-pushup/portal-client": "^0.16.0",
"@code-pushup/portal-client": "^0.17.0",
"@nx/devkit": "22.3.3",
"@swc/helpers": "0.5.18",
"ansis": "^3.3.2",
Expand Down
2 changes: 1 addition & 1 deletion packages/ci/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
"type": "module",
"dependencies": {
"@code-pushup/models": "0.112.0",
"@code-pushup/portal-client": "^0.16.0",
"@code-pushup/portal-client": "^0.17.0",
"@code-pushup/utils": "0.112.0",
"ansis": "^3.3.2",
"glob": "^11.0.1",
Expand Down
30 changes: 30 additions & 0 deletions packages/ci/src/lib/portal/__snapshots__/transform.unit.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,36 @@ exports[`transformGQLReport > should convert full GraphQL report to valid report
"slug": "bundle-stats",
"title": "Bundle stats",
},
{
"audits": [
{
"details": {
"issues": [
{
"message": "Element has insufficient color contrast of 4.33",
"severity": "error",
"source": {
"selector": ".hero > span:nth-child(2)",
"snippet": "<span style="color: #aaa">Low contrast</span>",
"url": "https://example.com/",
},
},
],
},
"displayValue": "1 error",
"score": 0,
"slug": "color-contrast",
"title": "Elements must meet minimum color contrast ratio thresholds",
"value": 1,
},
],
"date": "2025-08-01T00:10:25.000Z",
"duration": 5000,
"groups": [],
"icon": "folder-syntax",
"slug": "axe",
"title": "Axe accessibility",
},
],
"version": "0.42.0",
}
Expand Down
11 changes: 11 additions & 0 deletions packages/ci/src/lib/portal/transform.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,17 @@ function transformGQLIssue(issue: IssueFragment): Issue {
}),
},
}),
...(issue.source?.__typename === 'SourceUrlLocation' && {
source: {
url: issue.source.url,
...(issue.source.snippet != null && {
snippet: issue.source.snippet,
}),
...(issue.source.selector != null && {
selector: issue.source.selector,
}),
},
}),
};
}

Expand Down
36 changes: 36 additions & 0 deletions packages/ci/src/lib/portal/transform.unit.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,29 @@ describe('transformGQLReport', () => {
},
groups: [],
},
{
slug: 'axe',
title: 'Axe accessibility',
icon: 'folder-syntax',
runnerStartDate: '2025-08-01T00:10:25.000Z',
runnerDuration: 5000,
audits: {
edges: [
{
node: {
slug: 'color-contrast',
title:
'Elements must meet minimum color contrast ratio thresholds',
score: 0,
value: 1,
formattedValue: '1 error',
details: { enabled: true, trees: [], tables: [] },
},
},
],
},
groups: [],
},
],
issues: {
edges: [
Expand All @@ -231,6 +254,19 @@ describe('transformGQLReport', () => {
severity: IssueSeverity.Warning,
},
},
{
node: {
audit: { plugin: { slug: 'axe' }, slug: 'color-contrast' },
message: 'Element has insufficient color contrast of 4.33',
severity: IssueSeverity.Error,
source: {
__typename: 'SourceUrlLocation',
url: 'https://example.com/',
snippet: '<span style="color: #aaa">Low contrast</span>',
selector: '.hero > span:nth-child(2)',
},
},
},
],
},
};
Expand Down
2 changes: 1 addition & 1 deletion packages/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
"ansis": "^3.3.0"
},
"peerDependencies": {
"@code-pushup/portal-client": "^0.16.0"
"@code-pushup/portal-client": "^0.17.0"
},
"peerDependenciesMeta": {
"@code-pushup/portal-client": {
Expand Down
8 changes: 7 additions & 1 deletion packages/core/src/lib/implementation/report-to-gql.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import type {
TableAlignment,
Tree,
} from '@code-pushup/models';
import { isFileIssue } from '@code-pushup/utils';
import { isFileIssue, isUrlIssue } from '@code-pushup/utils';

export function reportToGQL(
report: Report,
Expand Down Expand Up @@ -115,6 +115,12 @@ export function issueToGQL(issue: Issue): PortalIssue {
sourceEndLine: issue.source.position?.endLine,
sourceEndColumn: issue.source.position?.endColumn,
}),
...(isUrlIssue(issue) && {
sourceType: safeEnum<PortalIssueSourceType>('Url'),
sourceUrl: issue.source.url,
sourceSnippet: issue.source.snippet,
sourceSelector: issue.source.selector,
}),
};
}

Expand Down
23 changes: 22 additions & 1 deletion packages/core/src/lib/implementation/report-to-gql.unit.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { type AuditReportTree, TreeType } from '@code-pushup/portal-client';
import { issueToGQL, tableToGQL, treeToGQL } from './report-to-gql.js';

describe('issueToGQL', () => {
it('transforms issue to GraphQL input type', () => {
it('should transform issue with file source to GraphQL input type', () => {
expect(
issueToGQL({
message: 'No let, use const instead.',
Expand All @@ -23,6 +23,27 @@ describe('issueToGQL', () => {
sourceEndColumn: 25,
});
});

it('should transform issue with URL source to GraphQL input type', () => {
expect(
issueToGQL({
message: 'Fix any of the following: Unable to determine contrast ratio',
severity: 'error',
source: {
url: 'https://code-pushup.dev/',
snippet: '<span>measure development KPIs</span>',
selector: '.text-box > span:nth-child(3)',
},
}),
).toStrictEqual({
message: 'Fix any of the following: Unable to determine contrast ratio',
severity: 'Error',
sourceSelector: '.text-box > span:nth-child(3)',
sourceSnippet: '<span>measure development KPIs</span>',
sourceType: 'Url',
sourceUrl: 'https://code-pushup.dev/',
});
});
});

describe('tableToGQL', () => {
Expand Down
32 changes: 20 additions & 12 deletions packages/plugin-axe/src/lib/runner/transform.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import type {
AuditOutputs,
Issue,
IssueSeverity,
SourceUrlLocation,
} from '@code-pushup/models';
import {
formatIssueSeverities,
Expand Down Expand Up @@ -71,26 +70,35 @@ function formatSelector(selector: axe.CrossTreeSelector): string {
return selector.join(' >> ');
}

/**
* Joins `none`/`all` check messages (each must be fixed).
* Falls back to first `any` check (OR-ed, one represents the group).
*/
function formatNodeMessage(node: axe.NodeResult, fallback: string): string {
const requiredMessages = [...node.none, ...node.all].map(
check => check.message,
);
if (requiredMessages.length > 0) {
return requiredMessages.join('. ');
}
return node.any[0]?.message ?? fallback;
}

function toIssue(node: axe.NodeResult, result: axe.Result, url: string): Issue {
const selector = node.target?.[0]
? formatSelector(node.target[0])
: undefined;
const rawMessage = node.failureSummary || result.help;
const cleanMessage = rawMessage.replace(/\s+/g, ' ').trim();

// TODO: Remove selector prefix from message once Portal supports URL sources
const message = selector ? `[\`${selector}\`] ${cleanMessage}` : cleanMessage;

const source: SourceUrlLocation = {
url,
...(node.html && { snippet: node.html }),
...(selector && { selector }),
};
const message = formatNodeMessage(node, result.help);

return {
message: truncateIssueMessage(message),
severity: impactToSeverity(node.impact),
source,
source: {
url,
...(node.html && { snippet: node.html }),
...(selector && { selector }),
},
};
}

Expand Down
Loading