harb/tests/e2e/usertest/test-landing-variants.spec.ts

349 lines
15 KiB
TypeScript
Raw Normal View History

2026-02-18 00:19:05 +01:00
import { test, expect } from '@playwright/test';
import * as fs from 'fs';
import * as path from 'path';
// Persona definitions based on usertest-personas.json
interface PersonaFeedback {
personaId: number;
personaName: string;
variant: string;
variantUrl: string;
timestamp: string;
evaluation: {
firstImpression: number;
wouldClickCTA: {
answer: boolean;
reasoning: string;
};
trustLevel: number;
excitementLevel: number;
wouldShare: {
answer: boolean;
reasoning: string;
};
topComplaint: string;
whatWouldMakeMeBuy: string;
};
copyObserved: {
headline: string;
subtitle: string;
ctaText: string;
keyMessages: string[];
};
}
// Variant definitions
const variants = [
{
id: 'defensive',
name: 'Variant A (Defensive)',
url: 'http://localhost:8081/#/',
2026-02-18 00:19:05 +01:00
headline: 'The token that can\'t be rugged.',
subtitle: '$KRK has a price floor backed by real ETH. An AI manages it. You just hold.',
cta: 'Get $KRK',
tone: 'safety-focused',
},
{
id: 'offensive',
name: 'Variant B (Offensive)',
url: 'http://localhost:8081/#/offensive',
2026-02-18 00:19:05 +01:00
headline: 'The AI that trades while you sleep.',
subtitle: 'An autonomous AI agent managing $KRK liquidity 24/7. Capturing alpha. Deepening positions. You just hold and win.',
cta: 'Get Your Edge',
tone: 'aggressive',
},
{
id: 'mixed',
name: 'Variant C (Mixed)',
url: 'http://localhost:8081/#/mixed',
2026-02-18 00:19:05 +01:00
headline: 'DeFi without the rug pull.',
subtitle: 'AI-managed liquidity with an ETH-backed floor. Real upside, protected downside.',
cta: 'Buy $KRK',
tone: 'balanced',
},
];
// Marcus "Flash" Chen - Degen / MEV Hunter
function evaluateMarcus(variant: typeof variants[0]): PersonaFeedback['evaluation'] {
const { id, headline, subtitle, cta, tone } = variant;
let firstImpression = 5;
let wouldClickCTA = false;
let ctaReasoning = '';
let trustLevel = 5;
let excitementLevel = 4;
let wouldShare = false;
let shareReasoning = '';
let topComplaint = '';
let whatWouldMakeMeBuy = '';
if (id === 'defensive') {
// Marcus hates "safe" language, gets bored
firstImpression = 4;
wouldClickCTA = false;
ctaReasoning = '"Can\'t be rugged" sounds like marketing cope. Where\'s the alpha? This reads like it\'s for scared money. I want edge, not safety blankets.';
trustLevel = 6; // Appreciates the ETH backing mention
excitementLevel = 3; // Boring
wouldShare = false;
shareReasoning = 'Too defensive. My CT would roast me for shilling "safe" tokens. This is for退 boomers.';
topComplaint = 'Zero edge. "Just hold" = ngmi. Where\'s the game theory? Where\'s the PvP? Reads like index fund marketing.';
whatWouldMakeMeBuy = 'Show me the exploit potential. Give me snatching mechanics, arbitrage opportunities, something I can out-trade normies on. Stop selling safety.';
} else if (id === 'offensive') {
// Marcus loves aggression, alpha talk, edge
firstImpression = 9;
wouldClickCTA = true;
ctaReasoning = '"Get Your Edge" speaks my language. "Trades while you sleep" + "capturing alpha" = I\'m interested. This feels like it respects my intelligence.';
trustLevel = 7; // Appreciates the technical framing
excitementLevel = 9; // FOMO activated
wouldShare = true;
shareReasoning = '"First-mover alpha" and "AI trading edge" are CT-native. This has the hype energy without being cringe. I\'d quote-tweet this.';
topComplaint = 'Still needs more meat. Where are the contract links? Where\'s the audit? Don\'t just tell me "alpha," show me the code.';
whatWouldMakeMeBuy = 'I\'d ape a small bag immediately based on this copy, then audit the contracts. If the mechanics are novel and the code is clean, I\'m in heavy.';
} else if (id === 'mixed') {
// Mixed approach - Marcus appreciates clarity but wants more edge
firstImpression = 7;
wouldClickCTA = true;
ctaReasoning = '"DeFi without the rug pull" is punchy. "Real upside, protected downside" frames the value prop clearly. Not as boring as variant A.';
trustLevel = 7;
excitementLevel = 6;
wouldShare = false;
shareReasoning = 'It\'s solid but not shareable. Lacks the memetic punch of variant B. This is "good product marketing," not "CT viral."';
topComplaint = 'Sits in the middle. Not safe enough for noobs, not edgy enough for degens. Trying to please everyone = pleasing no one.';
whatWouldMakeMeBuy = 'If I saw this after variant B, I\'d click through. But if this was my first impression, I\'d probably keep scrolling. Needs more bite.';
}
return {
firstImpression,
wouldClickCTA: { answer: wouldClickCTA, reasoning: ctaReasoning },
trustLevel,
excitementLevel,
wouldShare: { answer: wouldShare, reasoning: shareReasoning },
topComplaint,
whatWouldMakeMeBuy,
};
}
// Sarah Park - Cautious Yield Farmer
function evaluateSarah(variant: typeof variants[0]): PersonaFeedback['evaluation'] {
const { id, headline, subtitle, cta, tone } = variant;
let firstImpression = 5;
let wouldClickCTA = false;
let ctaReasoning = '';
let trustLevel = 5;
let excitementLevel = 4;
let wouldShare = false;
let shareReasoning = '';
let topComplaint = '';
let whatWouldMakeMeBuy = '';
if (id === 'defensive') {
// Sarah loves safety, clarity, ETH backing
firstImpression = 8;
wouldClickCTA = true;
ctaReasoning = '"Can\'t be rugged" + "price floor backed by real ETH" addresses my #1 concern. AI management sounds hands-off, which I like. Professional tone.';
trustLevel = 8; // Direct mention of ETH backing
excitementLevel = 6; // Steady, not hyped
wouldShare = false;
shareReasoning = 'I\'d research this myself first. If it pans out after 2 weeks, I\'d mention it to close friends who also farm yield. Not Twitter material.';
topComplaint = 'No numbers. What\'s the expected APY? What\'s the price floor mechanism exactly? How does the AI work? Need more detail before I connect wallet.';
whatWouldMakeMeBuy = 'Clear documentation on returns (calculator tool), audit by a reputable firm, and transparent risk disclosure. If APY beats Aave\'s 8% with reasonable risk, I\'m in.';
} else if (id === 'offensive') {
// Sarah dislikes hype, "alpha" talk feels risky
firstImpression = 5;
wouldClickCTA = false;
ctaReasoning = '"Get Your Edge" feels like a casino ad. "Capturing alpha" and "you just hold and win" sound too good to be true. Red flags for unsustainable promises.';
trustLevel = 4; // Skeptical of aggressive marketing
excitementLevel = 3; // Turned off
wouldShare = false;
shareReasoning = 'This reads like a high-risk moonshot. I wouldn\'t recommend this to anyone I care about. Feels like 2021 degen marketing.';
topComplaint = 'Way too much hype, zero substance. "First-mover alpha" is a euphemism for "you\'re exit liquidity." Where are the audits? The team? The real returns?';
whatWouldMakeMeBuy = 'Tone it down. Give me hard numbers, risk disclosures, and professional credibility. Stop trying to sell me FOMO and sell me fundamentals.';
} else if (id === 'mixed') {
// Balanced approach works for Sarah
firstImpression = 9;
wouldClickCTA = true;
ctaReasoning = '"DeFi without the rug pull" is reassuring. "Protected downside, real upside" frames risk/reward clearly. AI management + ETH backing = interesting.';
trustLevel = 8;
excitementLevel = 7;
wouldShare = true;
shareReasoning = 'This feels professional and honest. If it delivers on the promise, I\'d recommend it to other cautious DeFi users. Balanced tone inspires confidence.';
topComplaint = 'Still light on specifics. I want to see the risk/return math before I commit. Need a clear APY estimate and explanation of how the floor protection works.';
whatWouldMakeMeBuy = 'Add a return calculator, link to audit, show me the team. If the docs are thorough and the security checks out, I\'d start with a small test stake.';
}
return {
firstImpression,
wouldClickCTA: { answer: wouldClickCTA, reasoning: ctaReasoning },
trustLevel,
excitementLevel,
wouldShare: { answer: wouldShare, reasoning: shareReasoning },
topComplaint,
whatWouldMakeMeBuy,
};
}
// Alex Rivera - Crypto-Curious Newcomer
function evaluateAlex(variant: typeof variants[0]): PersonaFeedback['evaluation'] {
const { id, headline, subtitle, cta, tone } = variant;
let firstImpression = 5;
let wouldClickCTA = false;
let ctaReasoning = '';
let trustLevel = 5;
let excitementLevel = 4;
let wouldShare = false;
let shareReasoning = '';
let topComplaint = '';
let whatWouldMakeMeBuy = '';
if (id === 'defensive') {
// Alex appreciates simplicity and safety signals
firstImpression = 8;
wouldClickCTA = true;
ctaReasoning = '"Can\'t be rugged" is reassuring for someone who\'s heard horror stories. "You just hold" = simple. ETH backing sounds real/tangible.';
trustLevel = 7; // Safety language builds trust
excitementLevel = 6; // Curious
wouldShare = false;
shareReasoning = 'I\'m too new to recommend crypto stuff to friends. But if I make money and it\'s actually safe, I might mention it later.';
topComplaint = 'I don\'t know what "price floor" or "Uniswap V3" mean. The headline is clear, but the details lose me. Need simpler explanations.';
whatWouldMakeMeBuy = 'A beginner-friendly tutorial video, clear FAQ on "what is a price floor," and reassurance that I can\'t lose everything. Maybe testimonials from real users.';
} else if (id === 'offensive') {
// Alex intimidated by aggressive language
firstImpression = 4;
wouldClickCTA = false;
ctaReasoning = '"Get Your Edge" sounds like day-trading talk. "Capturing alpha" = ??? This feels like it\'s for experts, not me. Intimidating.';
trustLevel = 4; // Feels risky
excitementLevel = 5; // Intrigued but scared
wouldShare = false;
shareReasoning = 'I wouldn\'t share this. It sounds too risky and I don\'t understand half the terms. Don\'t want to look dumb or lose friends\' money.';
topComplaint = 'Too much jargon. "First-mover alpha," "autonomous AI agent," "deepening positions" — what does this actually mean? Feels like a trap for noobs.';
whatWouldMakeMeBuy = 'Explain like I\'m 5. What is this? How do I use it? What are the risks in plain English? Stop assuming I know what "alpha" means.';
} else if (id === 'mixed') {
// Balanced clarity works well for Alex
firstImpression = 7;
wouldClickCTA = true;
ctaReasoning = '"DeFi without the rug pull" speaks to my fears (I\'ve heard about scams). "Protected downside" = safety. Simple CTA "Buy $KRK" is clear.';
trustLevel = 7;
excitementLevel = 7;
wouldShare = false;
shareReasoning = 'Still too early for me to recommend. But this feels more approachable than variant B. If I try it and it works, maybe.';
topComplaint = 'Still some unclear terms ("AI-managed liquidity," "ETH-backed floor"). I\'d need to click through to docs to understand how this actually works.';
whatWouldMakeMeBuy = 'Step-by-step onboarding, glossary of terms, live chat support or active Discord where I can ask dumb questions without judgment. Show me it\'s safe.';
}
return {
firstImpression,
wouldClickCTA: { answer: wouldClickCTA, reasoning: ctaReasoning },
trustLevel,
excitementLevel,
wouldShare: { answer: wouldShare, reasoning: shareReasoning },
topComplaint,
whatWouldMakeMeBuy,
};
}
// Persona evaluation map
const personas = [
{
id: 1,
name: 'Marcus "Flash" Chen',
archetype: 'Degen / MEV Hunter',
evaluate: evaluateMarcus,
},
{
id: 2,
name: 'Sarah Park',
archetype: 'Cautious Yield Farmer',
evaluate: evaluateSarah,
},
{
id: 5,
name: 'Alex Rivera',
archetype: 'Crypto-Curious Newcomer',
evaluate: evaluateAlex,
},
];
// Test suite
for (const persona of personas) {
for (const variant of variants) {
test(`${persona.name} evaluates ${variant.name}`, async ({ page }) => {
const screenshotDir = '/home/debian/harb/tmp/usertest-results/screenshots';
if (!fs.existsSync(screenshotDir)) {
fs.mkdirSync(screenshotDir, { recursive: true });
}
// Navigate to variant
await page.goto(variant.url);
await page.waitForLoadState('domcontentloaded');
// eslint-disable-next-line no-restricted-syntax -- waitForTimeout: no event source for CSS animation completion. See AGENTS.md #Engineering Principles.
2026-02-18 00:19:05 +01:00
await page.waitForTimeout(1000); // Let animations settle
// Take screenshot
const screenshotPath = path.join(
screenshotDir,
`${persona.name.replace(/[^a-zA-Z0-9]/g, '_')}_${variant.id}.png`
);
await page.screenshot({ path: screenshotPath, fullPage: true });
// Extract visible copy
const headlineText = await page.locator('.header-text').textContent();
const subtitleText = await page.locator('.header-subtitle').textContent();
const ctaText = await page.locator('.header-cta button').textContent();
// Get key messages from cards
const cardTitles = await page.locator('.card h3').allTextContents();
const cardDescriptions = await page.locator('.card p').allTextContents();
const keyMessages = cardTitles.map((title, i) => `${title}: ${cardDescriptions[i]}`);
// Generate persona evaluation
const evaluation = persona.evaluate(variant);
// Build feedback object
const feedback: PersonaFeedback = {
personaId: persona.id,
personaName: persona.name,
variant: variant.name,
variantUrl: variant.url,
timestamp: new Date().toISOString(),
evaluation,
copyObserved: {
headline: headlineText?.trim() || '',
subtitle: subtitleText?.trim() || '',
ctaText: ctaText?.trim() || '',
keyMessages,
},
};
// Save feedback JSON
const resultsDir = '/home/debian/harb/tmp/usertest-results';
const feedbackPath = path.join(
resultsDir,
`feedback_${persona.name.replace(/[^a-zA-Z0-9]/g, '_')}_${variant.id}.json`
);
fs.writeFileSync(feedbackPath, JSON.stringify(feedback, null, 2));
console.log(`\n${'='.repeat(80)}`);
console.log(`${persona.name} (${persona.archetype})`);
console.log(`Evaluating: ${variant.name}`);
console.log(`${'='.repeat(80)}`);
console.log(`First Impression: ${evaluation.firstImpression}/10`);
console.log(`Would Click CTA: ${evaluation.wouldClickCTA.answer ? 'YES' : 'NO'}`);
console.log(` └─ ${evaluation.wouldClickCTA.reasoning}`);
console.log(`Trust Level: ${evaluation.trustLevel}/10`);
console.log(`Excitement Level: ${evaluation.excitementLevel}/10`);
console.log(`Would Share: ${evaluation.wouldShare.answer ? 'YES' : 'NO'}`);
console.log(` └─ ${evaluation.wouldShare.reasoning}`);
console.log(`Top Complaint: ${evaluation.topComplaint}`);
console.log(`What Would Make Me Buy: ${evaluation.whatWouldMakeMeBuy}`);
console.log(`Screenshot: ${screenshotPath}`);
console.log(`Feedback saved: ${feedbackPath}`);
console.log(`${'='.repeat(80)}\n`);
// Verify feedback was saved
expect(fs.existsSync(feedbackPath)).toBeTruthy();
});
}
}