diff --git a/cypress/e2e/events.cy.ts b/cypress/e2e/events.cy.ts index 249e7152785e5..1a07b9ce2ee7b 100644 --- a/cypress/e2e/events.cy.ts +++ b/cypress/e2e/events.cy.ts @@ -29,73 +29,9 @@ describe('Events', () => { cy.visit('/activity/explore') }) - it('Events loaded', () => { - cy.get('.DataTable').should('exist') - }) - + /** keeping this because it works locally in playwright but not in CI */ it('Click on an event', () => { cy.get('.DataTable [data-row-key]:nth-child(2) td:first-child').click() cy.get('[data-attr=event-details]').should('exist') }) - - it('Apply 1 overall filter', () => { - cy.get('[data-attr="new-prop-filter-EventPropertyFilters.0"]').click() - cy.get('[data-attr=taxonomic-filter-searchfield]').click() - cy.get('[data-attr=prop-filter-event_properties-0]').click() - cy.get('[data-attr=prop-val]').click({ force: true }) - cy.wait('@getBrowserValues').then(() => { - cy.get('[data-attr=prop-val-0]').click() - cy.get('.DataTable').should('exist') - }) - }) - - it('separates feature flag properties into their own tab', () => { - cy.get('[data-attr="new-prop-filter-EventPropertyFilters.0"]').click() - cy.get('[data-attr="taxonomic-tab-event_feature_flags"]').should('contain.text', 'Feature flags: 2').click() - // some virtualized rows remain in the dom, but hidden - cy.get('.taxonomic-list-row:visible').should('have.length', 2) - }) - - it('use before and after with a DateTime property', () => { - // Select the time property - cy.get('[data-attr="new-prop-filter-EventPropertyFilters.0"]').click() - cy.get('[data-attr=taxonomic-filter-searchfield]').type('$time') - cy.get('.taxonomic-list-row').should('have.length', 1) - cy.get('[data-attr=prop-filter-event_properties-0]').click({ force: true }) - - cy.get('[data-attr="taxonomic-operator"]').click() - cy.get('.operator-value-option').should('contain.text', '> after') - cy.get('.operator-value-option').should('contain.text', '< before') - }) - - it('use less than and greater than with a numeric property', () => { - cy.get('[data-attr="new-prop-filter-EventPropertyFilters.0"]').click() - cy.get('[data-attr=taxonomic-filter-searchfield]').type('$browser_version') - cy.get('.taxonomic-list-row').should('have.length', 1).click() - - cy.get('[data-attr="taxonomic-operator"]').click() - cy.get('.operator-value-option').its('length').should('eql', 11) // 10 + 1 for the label in the LemonSelect button - cy.get('.operator-value-option').contains('< less than').should('be.visible') - cy.get('.operator-value-option').contains('> greater than').should('be.visible') - }) - - it('adds and removes an additional column', () => { - cy.get('[data-attr=events-table-column-selector]').click() - cy.get('[data-attr=taxonomic-filter-searchfield]').type('$browser_version') - cy.get('.taxonomic-list-row').should('have.length', 1).click() - cy.get('.SelectedColumn').should('have.length', 7) - cy.get('[data-attr=column-display-item-remove-icon').last().click() - cy.get('.SelectedColumn').should('have.length', 6) - }) - - it('keeps the popop open after selecting an option', () => { - cy.get('[data-attr="new-prop-filter-EventPropertyFilters.0"]').click() - cy.get('[data-attr=taxonomic-filter-searchfield]').type('$browser_version') - cy.get('.taxonomic-list-row').should('have.length', 1).click() - - cy.get('[data-attr="taxonomic-operator"]').click() - cy.get('.operator-value-option').contains('> greater than').click() - cy.wait(500) - cy.get('[data-attr="taxonomic-operator"]').should('be.visible') - }) }) diff --git a/playwright/e2e/billing/billing-limits.spec.ts b/playwright/e2e/billing/billing-limits.spec.ts index c02c71351cb91..23bc666b3479a 100644 --- a/playwright/e2e/billing/billing-limits.spec.ts +++ b/playwright/e2e/billing/billing-limits.spec.ts @@ -12,7 +12,7 @@ type BillingRouteHandlers = { async function setupBillingRoutes(page: Page, handlers: BillingRouteHandlers): Promise { await page.route('**/api/billing/', async (route) => { const method = route.request().method() - const filePath = path.join(__dirname, '../../mocks/billing.json') + const filePath = path.join(__dirname, '../../mocks/billing/billing.json') let billingContent = JSON.parse(fs.readFileSync(filePath, 'utf-8')) if (method === 'GET') { diff --git a/playwright/e2e/billing/billing.spec.ts b/playwright/e2e/billing/billing.spec.ts index 3d489dcfa9628..a552958b45a91 100644 --- a/playwright/e2e/billing/billing.spec.ts +++ b/playwright/e2e/billing/billing.spec.ts @@ -9,7 +9,7 @@ test.describe('Billing', () => { // We'll read the JSON from a fixture folder. Adjust the path as needed. await page.route('**/api/billing/', async (route) => { // If your codebase uses a different structure, update accordingly - const filePath = path.join(__dirname, '../../mocks/billing.json') + const filePath = path.join(__dirname, '../../mocks/billing/billing.json') const billingContent = fs.readFileSync(filePath, 'utf-8') await route.fulfill({ status: 200, @@ -24,7 +24,7 @@ test.describe('Billing', () => { test('Show and submit unsubscribe survey', async ({ page }) => { // Intercept the specific unsubscribe request await page.route('**/api/billing/deactivate?products=product_analytics', async (route) => { - const filePath = path.join(__dirname, '../../mocks/billing-unsubscribed-product-analytics.json') + const filePath = path.join(__dirname, '../../mocks/billing/billing-unsubscribed-product-analytics.json') const unsubscribedContent = fs.readFileSync(filePath, 'utf-8') await route.fulfill({ status: 200, diff --git a/playwright/e2e/events.spec.ts b/playwright/e2e/events.spec.ts new file mode 100644 index 0000000000000..be98570d3c97e --- /dev/null +++ b/playwright/e2e/events.spec.ts @@ -0,0 +1,127 @@ +import path from 'path' + +import { expect, test } from '../utils/playwright-test-base' + +test.describe('Events', () => { + test.beforeEach(async ({ page }) => { + await page.route('/api/event/values?key=%24browser', (route) => + route.fulfill({ + status: 200, + body: JSON.stringify([{ name: '96' }, { name: '97' }]), + }) + ) + + await page.route('/api/projects/@current/property_definitions/?limit=5000', (route) => + route.fulfill({ + status: 200, + path: path.resolve(__dirname, '../mocks/events/property_definitions.json'), + }) + ) + + await page.route('/api/projects/*/property_definitions?is_feature_flag=false&search=&*', (route) => + route.fulfill({ + status: 200, + path: path.resolve(__dirname, '../mocks/events/property_definitions.json'), + }) + ) + + await page.route('/api/projects/*/property_definitions?is_feature_flag=false&search=%24time*', (route) => + route.fulfill({ + status: 200, + path: path.resolve(__dirname, '../mocks/events/only_time_property_definition.json'), + }) + ) + + await page.route('/api/projects/*/property_definitions?is_feature_flag=false&search=%24browser*', (route) => + route.fulfill({ + status: 200, + path: path.resolve(__dirname, '../mocks/events/only_browser_version_property_definition.json'), + }) + ) + + await page.route('/api/projects/*/property_definitions?is_feature_flag=true*', (route) => + route.fulfill({ + status: 200, + path: path.resolve(__dirname, '../mocks/events/feature_flag_property_definition.json'), + }) + ) + + await page.route('/api/event/values/?key=$browser_version', (route) => + route.fulfill({ + status: 200, + body: JSON.stringify([{ name: '96' }, { name: '97' }]), + }) + ) + + await page.goToMenuItem('activity') + await page.waitForURL('**/activity/explore') + }) + + /** works locally but not in CI - in CI the event list is never loading */ + test.skip('Click on an event', async ({ page }) => { + await expect(page.locator('.DataTable .DataTable__row').first()).toBeVisible() + await page.locator('.DataTable .DataTable__row .LemonTable__toggle').first().click() + await expect(page.locator('[data-attr=event-details]')).toBeVisible() + }) + + test('Apply 1 overall filter', async ({ page }) => { + await page.locator('[data-attr="new-prop-filter-EventPropertyFilters.0"]').click() + await page.locator('[data-attr=taxonomic-filter-searchfield]').click() + await page.locator('[data-attr=prop-filter-event_properties-0]').click() + await page.locator('[data-attr=prop-val]').click({ force: true }) + await page.waitForResponse('/api/event/values?key=%24browser') + await page.locator('[data-attr=prop-val-0]').click() + await expect(page.locator('.DataTable')).toBeVisible() + }) + + test('Separates feature flag properties into their own tab', async ({ page }) => { + await page.locator('[data-attr="new-prop-filter-EventPropertyFilters.0"]').click() + await expect(page.locator('[data-attr="taxonomic-tab-event_feature_flags"]')).toContainText('Feature flags: 2') + await page.locator('[data-attr="taxonomic-tab-event_feature_flags"]').click() + await expect(page.locator('.taxonomic-list-row:visible')).toHaveCount(2) + }) + + test('Use before and after with a DateTime property', async ({ page }) => { + await page.locator('[data-attr="new-prop-filter-EventPropertyFilters.0"]').click() + await page.locator('[data-attr=taxonomic-filter-searchfield]').type('$time') + await expect(page.locator('.taxonomic-list-row')).toHaveCount(1) + await page.locator('[data-attr=prop-filter-event_properties-0]').click({ force: true }) + + await page.locator('[data-attr="taxonomic-operator"]').click() + await expect(page.getByRole('menuitem', { name: '> after' })).toBeVisible() + await expect(page.getByRole('menuitem', { name: '< before' })).toBeVisible() + }) + + test('Use less than and greater than with a numeric property', async ({ page }) => { + await page.locator('[data-attr="new-prop-filter-EventPropertyFilters.0"]').click() + await page.locator('[data-attr=taxonomic-filter-searchfield]').type('$browser_version') + await expect(page.locator('.taxonomic-list-row')).toHaveCount(1) + await page.locator('.taxonomic-list-row').click() + + await page.locator('[data-attr="taxonomic-operator"]').click() + await expect(page.locator('.operator-value-option')).toHaveCount(11) // 10 + 1 for the label in the LemonSelect button + await expect(page.getByRole('menuitem', { name: '< less than' })).toBeVisible() + await expect(page.getByRole('menuitem', { name: '> greater than' })).toBeVisible() + }) + + test('Adds and removes an additional column', async ({ page }) => { + await page.locator('[data-attr=events-table-column-selector]').click() + await page.locator('[data-attr=taxonomic-filter-searchfield]').type('$browser_version') + await expect(page.locator('.taxonomic-list-row')).toHaveCount(1) + await page.locator('.taxonomic-list-row').click() + await expect(page.locator('.SelectedColumn')).toHaveCount(7) + await page.locator('[data-attr=column-display-item-remove-icon]').last().click() + await expect(page.locator('.SelectedColumn')).toHaveCount(6) + }) + + test('Keeps the popup open after selecting an option', async ({ page }) => { + await page.locator('[data-attr="new-prop-filter-EventPropertyFilters.0"]').click() + await page.locator('[data-attr=taxonomic-filter-searchfield]').type('$browser_version') + await expect(page.locator('.taxonomic-list-row')).toHaveCount(1) + await page.locator('.taxonomic-list-row').click() + + await page.locator('[data-attr="taxonomic-operator"]').click() + await page.getByRole('menuitem', { name: '> greater than' }).click() + await expect(page.locator('[data-attr="taxonomic-operator"]')).toBeVisible() + }) +}) diff --git a/playwright/mocks/billing-subscribed-all.json b/playwright/mocks/billing/billing-subscribed-all.json similarity index 100% rename from playwright/mocks/billing-subscribed-all.json rename to playwright/mocks/billing/billing-subscribed-all.json diff --git a/playwright/mocks/billing-unsubscribed-product-analytics.json b/playwright/mocks/billing/billing-unsubscribed-product-analytics.json similarity index 100% rename from playwright/mocks/billing-unsubscribed-product-analytics.json rename to playwright/mocks/billing/billing-unsubscribed-product-analytics.json diff --git a/playwright/mocks/billing-unsubscribed.json b/playwright/mocks/billing/billing-unsubscribed.json similarity index 100% rename from playwright/mocks/billing-unsubscribed.json rename to playwright/mocks/billing/billing-unsubscribed.json diff --git a/playwright/mocks/billing.json b/playwright/mocks/billing/billing.json similarity index 100% rename from playwright/mocks/billing.json rename to playwright/mocks/billing/billing.json diff --git a/playwright/mocks/events/feature_flag_property_definition.json b/playwright/mocks/events/feature_flag_property_definition.json new file mode 100644 index 0000000000000..836f14a512767 --- /dev/null +++ b/playwright/mocks/events/feature_flag_property_definition.json @@ -0,0 +1,23 @@ +{ + "count": 2, + "next": null, + "previous": null, + "results": [ + { + "id": "017dde0e-1cb5-0000-68b4-44835b7c894f", + "name": "$feature/awesome-new-hidden-thing", + "is_numerical": false, + "query_usage_30_day": null, + "property_type": null, + "is_seen_on_filtered_events": null + }, + { + "id": "017dde0e-1cb5-0000-68b4-44835b7c894f", + "name": "$feature/our-cool-experiment", + "is_numerical": false, + "query_usage_30_day": null, + "property_type": null, + "is_seen_on_filtered_events": null + } + ] +} diff --git a/playwright/mocks/events/only_browser_version_property_definition.json b/playwright/mocks/events/only_browser_version_property_definition.json new file mode 100644 index 0000000000000..060cdcc5285e0 --- /dev/null +++ b/playwright/mocks/events/only_browser_version_property_definition.json @@ -0,0 +1,15 @@ +{ + "count": 1, + "next": null, + "previous": null, + "results": [ + { + "id": "017dde0e-1cb5-0000-68b4-44835b7c894f", + "name": "$browser_version", + "is_numerical": true, + "query_usage_30_day": null, + "property_type": null, + "is_seen_on_filtered_events": null + } + ] +} diff --git a/playwright/mocks/events/only_time_property_definition.json b/playwright/mocks/events/only_time_property_definition.json new file mode 100644 index 0000000000000..edfae1da71b55 --- /dev/null +++ b/playwright/mocks/events/only_time_property_definition.json @@ -0,0 +1,15 @@ +{ + "count": 1, + "next": null, + "previous": null, + "results": [ + { + "id": "017dde0e-1cc9-0000-ed91-26909937767f", + "name": "$time", + "is_numerical": true, + "query_usage_30_day": null, + "property_type": "DateTime", + "is_seen_on_filtered_events": null + } + ] +} diff --git a/playwright/mocks/events/property_definitions.json b/playwright/mocks/events/property_definitions.json new file mode 100644 index 0000000000000..804ba2ca92f1c --- /dev/null +++ b/playwright/mocks/events/property_definitions.json @@ -0,0 +1,23 @@ +{ + "count": 2, + "next": null, + "previous": null, + "results": [ + { + "id": "017dde0e-1cb5-0000-68b4-44835b7c894f", + "name": "$browser", + "is_numerical": true, + "query_usage_30_day": null, + "property_type": null, + "is_seen_on_filtered_events": null + }, + { + "id": "017dde0e-1cc9-0000-ed91-26909937767f", + "name": "$time", + "is_numerical": true, + "query_usage_30_day": null, + "property_type": "DateTime", + "is_seen_on_filtered_events": null + } + ] +} diff --git a/playwright/mocks/events/session_recording.json b/playwright/mocks/events/session_recording.json new file mode 100644 index 0000000000000..d712055c36b55 --- /dev/null +++ b/playwright/mocks/events/session_recording.json @@ -0,0 +1,2970 @@ +{ + "result": { + "snapshots": [ + { "data": {}, "type": 0, "timestamp": 1611914066510 }, + { "data": {}, "type": 1, "timestamp": 1611914066566 }, + { + "data": { "href": "http://localhost:8000/demo/1", "width": 1276, "height": 1300 }, + "type": 4, + "timestamp": 1611914066566 + }, + { + "data": { + "node": { + "id": 1, + "type": 0, + "childNodes": [ + { + "id": 2, + "type": 2, + "tagName": "html", + "attributes": {}, + "childNodes": [ + { + "id": 3, + "type": 2, + "tagName": "head", + "attributes": {}, + "childNodes": [ + { "id": 4, "type": 3, "textContent": "\n " }, + { + "id": 5, + "type": 2, + "tagName": "title", + "attributes": {}, + "childNodes": [{ "id": 6, "type": 3, "textContent": "Hogflix" }] + }, + { "id": 7, "type": 3, "textContent": "\n " }, + { + "id": 8, + "type": 2, + "tagName": "script", + "attributes": { + "src": "http://localhost:8000/static/recorder.js?v=1.8.3", + "type": "text/javascript" + }, + "childNodes": [] + }, + { + "id": 9, + "type": 2, + "tagName": "script", + "attributes": { "src": "http://localhost:8000/static/array.js" }, + "childNodes": [] + }, + { "id": 10, "type": 3, "textContent": "\n " }, + { + "id": 11, + "type": 2, + "tagName": "script", + "attributes": {}, + "childNodes": [ + { "id": 12, "type": 3, "textContent": "SCRIPT_PLACEHOLDER" } + ] + }, + { "id": 13, "type": 3, "textContent": "\n " }, + { + "id": 14, + "type": 2, + "tagName": "link", + "attributes": { + "rel": "stylesheet", + "href": "https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css" + }, + "childNodes": [] + }, + { "id": 15, "type": 3, "textContent": "\n " }, + { + "id": 16, + "type": 2, + "tagName": "script", + "attributes": { + "src": "https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js" + }, + "childNodes": [] + }, + { "id": 17, "type": 3, "textContent": "\n " }, + { + "id": 18, + "type": 2, + "tagName": "link", + "attributes": { + "rel": "stylesheet", + "href": "https://unpkg.com/mvp.css" + }, + "childNodes": [] + }, + { "id": 19, "type": 3, "textContent": "\n\n " }, + { + "id": 20, + "type": 2, + "tagName": "style", + "attributes": {}, + "childNodes": [ + { + "id": 21, + "type": 3, + "isStyle": true, + "textContent": "\n :root {\n --color: #e9130c !important;\n --color-accent: #118bee15 !important;\n --color-bg: rgb(37, 37, 37) !important;\n --color-bg-secondary: #e9e9e9 !important;\n --color-secondary: #fa0303 !important;\n --color-secondary-accent: #eb1c1c0b !important;\n --color-shadow: #a8a8a8 !important;\n --color-text: rgb(231, 231, 231) !important;\n --color-text-secondary: rgb(212, 212, 212) !important;\n }\n\n video {\n max-width: 600px !important;\n margin: auto;\n display: block;\n }\n\n input {\n background-color: rgb(59, 59, 59);\n border-color: rgb(54, 54, 54);\n color: #fff;\n }\n " + } + ] + }, + { "id": 22, "type": 3, "textContent": "\n" } + ] + }, + { "id": 23, "type": 3, "textContent": "\n\n" }, + { + "id": 24, + "type": 2, + "tagName": "body", + "attributes": {}, + "childNodes": [ + { "id": 25, "type": 3, "textContent": "\n\n " }, + { + "id": 26, + "type": 2, + "tagName": "main", + "attributes": {}, + "childNodes": [ + { "id": 27, "type": 3, "textContent": "\n " }, + { + "id": 28, + "type": 2, + "tagName": "header", + "attributes": {}, + "childNodes": [ + { "id": 29, "type": 3, "textContent": "\n " }, + { + "id": 30, + "type": 2, + "tagName": "article", + "attributes": {}, + "childNodes": [ + { + "id": 31, + "type": 3, + "textContent": "\n " + }, + { + "id": 32, + "type": 2, + "tagName": "aside", + "attributes": {}, + "childNodes": [ + { + "id": 33, + "type": 3, + "textContent": "\n " + }, + { + "id": 34, + "type": 2, + "tagName": "p", + "attributes": {}, + "childNodes": [ + { + "id": 35, + "type": 3, + "textContent": "Welcome to the PostHog demo environment!" + } + ] + }, + { + "id": 36, + "type": 3, + "textContent": "\n " + }, + { + "id": 37, + "type": 2, + "tagName": "small", + "attributes": {}, + "childNodes": [ + { + "id": 38, + "type": 3, + "textContent": "\n By going through this demo you can simulate a user going through a signup funnel. " + }, + { + "id": 39, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/" + }, + "childNodes": [ + { + "id": 40, + "type": 3, + "textContent": "You can\n explore the data in PostHog within project \"Hogflix Demo App\"." + } + ] + }, + { + "id": 41, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 42, + "type": 3, + "textContent": "\n " + }, + { + "id": 43, + "type": 2, + "tagName": "p", + "attributes": {}, + "childNodes": [ + { + "id": 44, + "type": 3, + "textContent": " " + } + ] + }, + { + "id": 45, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 46, + "type": 3, + "textContent": "\n " + } + ] + }, + { "id": 47, "type": 3, "textContent": "\n " }, + { + "id": 48, + "type": 2, + "tagName": "nav", + "attributes": {}, + "childNodes": [ + { + "id": 49, + "type": 3, + "textContent": "\n " + }, + { + "id": 50, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/demo", + "style": "color: rgb(197, 197, 197)" + }, + "childNodes": [ + { + "id": 51, + "type": 3, + "textContent": "\n " + }, + { + "id": 52, + "type": 2, + "tagName": "h3", + "attributes": {}, + "childNodes": [ + { + "id": 53, + "type": 3, + "textContent": "Hogflix" + } + ] + }, + { + "id": 54, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 55, + "type": 3, + "textContent": "\n " + }, + { + "id": 56, + "type": 2, + "tagName": "ul", + "attributes": {}, + "childNodes": [ + { + "id": 57, + "type": 3, + "textContent": "\n " + }, + { + "id": 58, + "type": 2, + "tagName": "li", + "attributes": {}, + "childNodes": [ + { + "id": 59, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/demo/1" + }, + "childNodes": [ + { + "id": 60, + "type": 3, + "textContent": "Sign Up" + } + ] + } + ] + }, + { + "id": 61, + "type": 3, + "textContent": "\n " + }, + { + "id": 62, + "type": 2, + "tagName": "li", + "attributes": {}, + "childNodes": [ + { + "id": 63, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/demo/2" + }, + "childNodes": [ + { + "id": 64, + "type": 3, + "textContent": "Payment" + } + ] + } + ] + }, + { + "id": 65, + "type": 3, + "textContent": "\n " + }, + { + "id": 66, + "type": 2, + "tagName": "li", + "attributes": {}, + "childNodes": [ + { + "id": 67, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/demo/3" + }, + "childNodes": [ + { + "id": 68, + "type": 3, + "textContent": "Movies" + } + ] + } + ] + }, + { + "id": 69, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 70, + "type": 3, + "textContent": "\n " + } + ] + }, + { "id": 71, "type": 3, "textContent": "\n " } + ] + }, + { + "id": 72, + "type": 3, + "textContent": "\n\n \n\n \n " + }, + { + "id": 73, + "type": 2, + "tagName": "section", + "attributes": {}, + "childNodes": [ + { "id": 74, "type": 3, "textContent": "\n " }, + { + "id": 75, + "type": 2, + "tagName": "form", + "attributes": { "action": "/demo/2" }, + "childNodes": [ + { + "id": 76, + "type": 3, + "textContent": "\n " + }, + { + "id": 77, + "type": 2, + "tagName": "h1", + "attributes": {}, + "childNodes": [ + { + "id": 78, + "type": 3, + "textContent": "Sign Up" + } + ] + }, + { + "id": 79, + "type": 3, + "textContent": "\n\n " + }, + { + "id": 80, + "type": 2, + "tagName": "label", + "attributes": {}, + "childNodes": [ + { + "id": 81, + "type": 3, + "textContent": "Username" + } + ] + }, + { + "id": 82, + "type": 3, + "textContent": "\n " + }, + { + "id": 83, + "type": 2, + "tagName": "input", + "attributes": { + "name": "username", + "type": "text", + "class": "form-control" + }, + "childNodes": [] + }, + { + "id": 84, + "type": 3, + "textContent": "\n " + }, + { + "id": 85, + "type": 2, + "tagName": "label", + "attributes": {}, + "childNodes": [ + { + "id": 86, + "type": 3, + "textContent": "Password" + } + ] + }, + { + "id": 87, + "type": 3, + "textContent": "\n " + }, + { + "id": 88, + "type": 2, + "tagName": "input", + "attributes": { + "name": "password", + "type": "password", + "class": "form-control" + }, + "childNodes": [] + }, + { + "id": 89, + "type": 3, + "textContent": "\n " + }, + { + "id": 90, + "type": 2, + "tagName": "button", + "attributes": { "type": "submit" }, + "childNodes": [ + { + "id": 91, + "type": 3, + "textContent": "Sign up!" + } + ] + }, + { + "id": 92, + "type": 3, + "textContent": "\n " + } + ] + }, + { "id": 93, "type": 3, "textContent": "\n " } + ] + }, + { + "id": 94, + "type": 3, + "textContent": "\n \n \n \n \n\n \n\n " + }, + { + "id": 95, + "type": 2, + "tagName": "script", + "attributes": {}, + "childNodes": [ + { "id": 96, "type": 3, "textContent": "SCRIPT_PLACEHOLDER" } + ] + }, + { "id": 97, "type": 3, "textContent": "\n\n\n\n" } + ] + } + ] + } + ] + } + ] + }, + "initialOffset": { "top": 0, "left": 0 } + }, + "type": 2, + "timestamp": 1611914066570 + }, + { + "data": { "source": 1, "positions": [{ "x": 610, "y": 498, "id": 75, "timeOffset": 0 }] }, + "type": 3, + "timestamp": 1611914066574 + }, + { + "data": { + "source": 1, + "positions": [ + { "x": 604, "y": 491, "id": 83, "timeOffset": -450 }, + { "x": 584, "y": 470, "id": 83, "timeOffset": -392 }, + { "x": 574, "y": 457, "id": 80, "timeOffset": -333 }, + { "x": 567, "y": 440, "id": 80, "timeOffset": -283 }, + { "x": 561, "y": 424, "id": 75, "timeOffset": -233 }, + { "x": 561, "y": 428, "id": 75, "timeOffset": -122 }, + { "x": 571, "y": 457, "id": 80, "timeOffset": -66 }, + { "x": 571, "y": 468, "id": 83, "timeOffset": -16 } + ] + }, + "type": 3, + "timestamp": 1611914067074 + }, + { "data": { "x": 567, "y": 474, "id": 83, "type": 1, "source": 2 }, "type": 3, "timestamp": 1611914067135 }, + { "data": { "id": 83, "type": 5, "source": 2 }, "type": 3, "timestamp": 1611914067142 }, + { "data": { "x": 567, "y": 474, "id": 83, "type": 0, "source": 2 }, "type": 3, "timestamp": 1611914067252 }, + { "data": { "x": 567, "y": 474, "id": 83, "type": 2, "source": 2 }, "type": 3, "timestamp": 1611914067256 }, + { + "data": { + "source": 1, + "positions": [ + { "x": 567, "y": 474, "id": 83, "timeOffset": -466 }, + { "x": 566, "y": 474, "id": 83, "timeOffset": -236 } + ] + }, + "type": 3, + "timestamp": 1611914067574 + }, + { + "data": { "id": 83, "text": "g", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914068464 + }, + { + "data": { "id": 83, "text": "ge", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914068566 + }, + { + "data": { "id": 83, "text": "gel", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914068728 + }, + { + "data": { "id": 83, "text": "ge", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914069294 + }, + { + "data": { "id": 83, "text": "g", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914069446 + }, + { + "data": { "id": 83, "text": "", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914069576 + }, + { + "data": { "id": 83, "text": "h", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914070054 + }, + { + "data": { "id": 83, "text": "he", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914070136 + }, + { + "data": { "id": 83, "text": "hel", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914070270 + }, + { + "data": { "id": 83, "text": "hell", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914070421 + }, + { + "data": { "id": 83, "text": "hello", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914070589 + }, + { + "data": { "id": 83, "text": "hellow", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914070677 + }, + { + "data": { "id": 83, "text": "hellowo", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914070829 + }, + { + "data": { "id": 83, "text": "hellowor", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914070949 + }, + { + "data": { "id": 83, "text": "helloworl", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914071109 + }, + { + "data": { "id": 83, "text": "helloworld", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914071165 + }, + { "data": { "id": 83, "type": 6, "source": 2 }, "type": 3, "timestamp": 1611914071543 }, + { "data": { "id": 88, "type": 5, "source": 2 }, "type": 3, "timestamp": 1611914071548 }, + { "data": {}, "type": 0, "timestamp": 1611914073773 }, + { "data": {}, "type": 1, "timestamp": 1611914073782 }, + { + "data": { + "href": "http://localhost:8000/demo/2?username=helloworld&password=mynameis", + "width": 1276, + "height": 1300 + }, + "type": 4, + "timestamp": 1611914073783 + }, + { + "data": { + "node": { + "id": 1, + "type": 0, + "childNodes": [ + { + "id": 2, + "type": 2, + "tagName": "html", + "attributes": {}, + "childNodes": [ + { + "id": 3, + "type": 2, + "tagName": "head", + "attributes": {}, + "childNodes": [ + { "id": 4, "type": 3, "textContent": "\n " }, + { + "id": 5, + "type": 2, + "tagName": "title", + "attributes": {}, + "childNodes": [{ "id": 6, "type": 3, "textContent": "Hogflix" }] + }, + { "id": 7, "type": 3, "textContent": "\n " }, + { + "id": 8, + "type": 2, + "tagName": "script", + "attributes": { + "src": "http://localhost:8000/static/recorder.js?v=1.8.3", + "type": "text/javascript" + }, + "childNodes": [] + }, + { + "id": 9, + "type": 2, + "tagName": "script", + "attributes": { "src": "http://localhost:8000/static/array.js" }, + "childNodes": [] + }, + { "id": 10, "type": 3, "textContent": "\n " }, + { + "id": 11, + "type": 2, + "tagName": "script", + "attributes": {}, + "childNodes": [ + { "id": 12, "type": 3, "textContent": "SCRIPT_PLACEHOLDER" } + ] + }, + { "id": 13, "type": 3, "textContent": "\n " }, + { + "id": 14, + "type": 2, + "tagName": "link", + "attributes": { + "rel": "stylesheet", + "href": "https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css" + }, + "childNodes": [] + }, + { "id": 15, "type": 3, "textContent": "\n " }, + { + "id": 16, + "type": 2, + "tagName": "script", + "attributes": { + "src": "https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js" + }, + "childNodes": [] + }, + { "id": 17, "type": 3, "textContent": "\n " }, + { + "id": 18, + "type": 2, + "tagName": "link", + "attributes": { + "rel": "stylesheet", + "href": "https://unpkg.com/mvp.css" + }, + "childNodes": [] + }, + { "id": 19, "type": 3, "textContent": "\n\n " }, + { + "id": 20, + "type": 2, + "tagName": "style", + "attributes": {}, + "childNodes": [ + { + "id": 21, + "type": 3, + "isStyle": true, + "textContent": "\n :root {\n --color: #e9130c !important;\n --color-accent: #118bee15 !important;\n --color-bg: rgb(37, 37, 37) !important;\n --color-bg-secondary: #e9e9e9 !important;\n --color-secondary: #fa0303 !important;\n --color-secondary-accent: #eb1c1c0b !important;\n --color-shadow: #a8a8a8 !important;\n --color-text: rgb(231, 231, 231) !important;\n --color-text-secondary: rgb(212, 212, 212) !important;\n }\n\n video {\n max-width: 600px !important;\n margin: auto;\n display: block;\n }\n\n input {\n background-color: rgb(59, 59, 59);\n border-color: rgb(54, 54, 54);\n color: #fff;\n }\n " + } + ] + }, + { "id": 22, "type": 3, "textContent": "\n" } + ] + }, + { "id": 23, "type": 3, "textContent": "\n\n" }, + { + "id": 24, + "type": 2, + "tagName": "body", + "attributes": {}, + "childNodes": [ + { "id": 25, "type": 3, "textContent": "\n\n " }, + { + "id": 26, + "type": 2, + "tagName": "main", + "attributes": {}, + "childNodes": [ + { "id": 27, "type": 3, "textContent": "\n " }, + { + "id": 28, + "type": 2, + "tagName": "header", + "attributes": {}, + "childNodes": [ + { "id": 29, "type": 3, "textContent": "\n " }, + { + "id": 30, + "type": 2, + "tagName": "article", + "attributes": {}, + "childNodes": [ + { + "id": 31, + "type": 3, + "textContent": "\n " + }, + { + "id": 32, + "type": 2, + "tagName": "aside", + "attributes": {}, + "childNodes": [ + { + "id": 33, + "type": 3, + "textContent": "\n " + }, + { + "id": 34, + "type": 2, + "tagName": "p", + "attributes": {}, + "childNodes": [ + { + "id": 35, + "type": 3, + "textContent": "Welcome to the PostHog demo environment!" + } + ] + }, + { + "id": 36, + "type": 3, + "textContent": "\n " + }, + { + "id": 37, + "type": 2, + "tagName": "small", + "attributes": {}, + "childNodes": [ + { + "id": 38, + "type": 3, + "textContent": "\n By going through this demo you can simulate a user going through a signup funnel. " + }, + { + "id": 39, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/" + }, + "childNodes": [ + { + "id": 40, + "type": 3, + "textContent": "You can\n explore the data in PostHog within project \"Hogflix Demo App\"." + } + ] + }, + { + "id": 41, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 42, + "type": 3, + "textContent": "\n " + }, + { + "id": 43, + "type": 2, + "tagName": "p", + "attributes": {}, + "childNodes": [ + { + "id": 44, + "type": 3, + "textContent": " " + } + ] + }, + { + "id": 45, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 46, + "type": 3, + "textContent": "\n " + } + ] + }, + { "id": 47, "type": 3, "textContent": "\n " }, + { + "id": 48, + "type": 2, + "tagName": "nav", + "attributes": {}, + "childNodes": [ + { + "id": 49, + "type": 3, + "textContent": "\n " + }, + { + "id": 50, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/demo", + "style": "color: rgb(197, 197, 197)" + }, + "childNodes": [ + { + "id": 51, + "type": 3, + "textContent": "\n " + }, + { + "id": 52, + "type": 2, + "tagName": "h3", + "attributes": {}, + "childNodes": [ + { + "id": 53, + "type": 3, + "textContent": "Hogflix" + } + ] + }, + { + "id": 54, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 55, + "type": 3, + "textContent": "\n " + }, + { + "id": 56, + "type": 2, + "tagName": "ul", + "attributes": {}, + "childNodes": [ + { + "id": 57, + "type": 3, + "textContent": "\n " + }, + { + "id": 58, + "type": 2, + "tagName": "li", + "attributes": {}, + "childNodes": [ + { + "id": 59, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/demo/1" + }, + "childNodes": [ + { + "id": 60, + "type": 3, + "textContent": "Sign Up" + } + ] + } + ] + }, + { + "id": 61, + "type": 3, + "textContent": "\n " + }, + { + "id": 62, + "type": 2, + "tagName": "li", + "attributes": {}, + "childNodes": [ + { + "id": 63, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/demo/2" + }, + "childNodes": [ + { + "id": 64, + "type": 3, + "textContent": "Payment" + } + ] + } + ] + }, + { + "id": 65, + "type": 3, + "textContent": "\n " + }, + { + "id": 66, + "type": 2, + "tagName": "li", + "attributes": {}, + "childNodes": [ + { + "id": 67, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/demo/3" + }, + "childNodes": [ + { + "id": 68, + "type": 3, + "textContent": "Movies" + } + ] + } + ] + }, + { + "id": 69, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 70, + "type": 3, + "textContent": "\n " + } + ] + }, + { "id": 71, "type": 3, "textContent": "\n " } + ] + }, + { + "id": 72, + "type": 3, + "textContent": "\n\n \n\n \n \n " + }, + { + "id": 73, + "type": 2, + "tagName": "section", + "attributes": {}, + "childNodes": [ + { "id": 74, "type": 3, "textContent": "\n " }, + { + "id": 75, + "type": 2, + "tagName": "form", + "attributes": { "action": "/demo/3" }, + "childNodes": [ + { + "id": 76, + "type": 3, + "textContent": "\n " + }, + { + "id": 77, + "type": 2, + "tagName": "h1", + "attributes": {}, + "childNodes": [ + { + "id": 78, + "type": 3, + "textContent": "Pay for Hogflix" + } + ] + }, + { + "id": 79, + "type": 3, + "textContent": "\n " + }, + { + "id": 80, + "type": 2, + "tagName": "label", + "attributes": {}, + "childNodes": [ + { + "id": 81, + "type": 3, + "textContent": "Credit card number" + } + ] + }, + { + "id": 82, + "type": 3, + "textContent": "\n " + }, + { + "id": 83, + "type": 2, + "tagName": "input", + "attributes": { + "name": "creditcard", + "type": "text", + "class": "form-control", + "placeholder": "4000 0000 0000 0000" + }, + "childNodes": [] + }, + { + "id": 84, + "type": 3, + "textContent": "\n " + }, + { + "id": 85, + "type": 2, + "tagName": "button", + "attributes": { "type": "submit" }, + "childNodes": [ + { + "id": 86, + "type": 3, + "textContent": "Pay $10!" + } + ] + }, + { "id": 87, "type": 3, "textContent": "\n " } + ] + } + ] + }, + { + "id": 88, + "type": 3, + "textContent": "\n \n \n \n \n\n \n\n " + }, + { + "id": 89, + "type": 2, + "tagName": "script", + "attributes": {}, + "childNodes": [ + { "id": 90, "type": 3, "textContent": "SCRIPT_PLACEHOLDER" } + ] + }, + { "id": 91, "type": 3, "textContent": "\n\n\n\n" } + ] + } + ] + } + ] + } + ] + }, + "initialOffset": { "top": 0, "left": 0 } + }, + "type": 2, + "timestamp": 1611914073787 + }, + { + "data": { "source": 1, "positions": [{ "x": 566, "y": 474, "id": 83, "timeOffset": 0 }] }, + "type": 3, + "timestamp": 1611914074641 + }, + { + "data": { + "source": 1, + "positions": [ + { "x": 568, "y": 471, "id": 83, "timeOffset": -427 }, + { "x": 568, "y": 471, "id": 83, "timeOffset": -297 }, + { "x": 569, "y": 472, "id": 83, "timeOffset": -92 }, + { "x": 576, "y": 480, "id": 83, "timeOffset": -27 } + ] + }, + "type": 3, + "timestamp": 1611914075141 + }, + { "data": { "x": 589, "y": 490, "id": 83, "type": 1, "source": 2 }, "type": 3, "timestamp": 1611914075341 }, + { "data": { "id": 83, "type": 5, "source": 2 }, "type": 3, "timestamp": 1611914075348 }, + { "data": { "x": 589, "y": 490, "id": 83, "type": 0, "source": 2 }, "type": 3, "timestamp": 1611914075442 }, + { "data": { "x": 589, "y": 490, "id": 83, "type": 2, "source": 2 }, "type": 3, "timestamp": 1611914075446 }, + { + "data": { + "source": 1, + "positions": [ + { "x": 584, "y": 488, "id": 83, "timeOffset": -462 }, + { "x": 589, "y": 490, "id": 83, "timeOffset": -318 } + ] + }, + "type": 3, + "timestamp": 1611914075642 + }, + { + "data": { "id": 83, "text": "1", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914076240 + }, + { + "data": { "id": 83, "text": "12", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914076281 + }, + { + "data": { "id": 83, "text": "123", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914076421 + }, + { + "data": { "id": 83, "text": "1231", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914076583 + }, + { + "data": { "id": 83, "text": "12314", "source": 5, "isChecked": false }, + "type": 3, + "timestamp": 1611914076678 + }, + { "data": {}, "type": 0, "timestamp": 1611914077869 }, + { "data": {}, "type": 1, "timestamp": 1611914079313 }, + { + "data": { "href": "http://localhost:8000/demo/3?creditcard=12314143", "width": 1276, "height": 1300 }, + "type": 4, + "timestamp": 1611914079317 + }, + { + "data": { + "node": { + "id": 1, + "type": 0, + "childNodes": [ + { + "id": 2, + "type": 2, + "tagName": "html", + "attributes": {}, + "childNodes": [ + { + "id": 3, + "type": 2, + "tagName": "head", + "attributes": {}, + "childNodes": [ + { "id": 4, "type": 3, "textContent": "\n " }, + { + "id": 5, + "type": 2, + "tagName": "title", + "attributes": {}, + "childNodes": [{ "id": 6, "type": 3, "textContent": "Hogflix" }] + }, + { "id": 7, "type": 3, "textContent": "\n " }, + { + "id": 8, + "type": 2, + "tagName": "script", + "attributes": { + "src": "http://localhost:8000/static/recorder.js?v=1.8.3", + "type": "text/javascript" + }, + "childNodes": [] + }, + { + "id": 9, + "type": 2, + "tagName": "script", + "attributes": { "src": "http://localhost:8000/static/array.js" }, + "childNodes": [] + }, + { "id": 10, "type": 3, "textContent": "\n " }, + { + "id": 11, + "type": 2, + "tagName": "script", + "attributes": {}, + "childNodes": [ + { "id": 12, "type": 3, "textContent": "SCRIPT_PLACEHOLDER" } + ] + }, + { "id": 13, "type": 3, "textContent": "\n " }, + { + "id": 14, + "type": 2, + "tagName": "link", + "attributes": { + "rel": "stylesheet", + "href": "https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css" + }, + "childNodes": [] + }, + { "id": 15, "type": 3, "textContent": "\n " }, + { + "id": 16, + "type": 2, + "tagName": "script", + "attributes": { + "src": "https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js" + }, + "childNodes": [] + }, + { "id": 17, "type": 3, "textContent": "\n " }, + { + "id": 18, + "type": 2, + "tagName": "link", + "attributes": { + "rel": "stylesheet", + "href": "https://unpkg.com/mvp.css" + }, + "childNodes": [] + }, + { "id": 19, "type": 3, "textContent": "\n\n " }, + { + "id": 20, + "type": 2, + "tagName": "style", + "attributes": {}, + "childNodes": [ + { + "id": 21, + "type": 3, + "isStyle": true, + "textContent": "\n :root {\n --color: #e9130c !important;\n --color-accent: #118bee15 !important;\n --color-bg: rgb(37, 37, 37) !important;\n --color-bg-secondary: #e9e9e9 !important;\n --color-secondary: #fa0303 !important;\n --color-secondary-accent: #eb1c1c0b !important;\n --color-shadow: #a8a8a8 !important;\n --color-text: rgb(231, 231, 231) !important;\n --color-text-secondary: rgb(212, 212, 212) !important;\n }\n\n video {\n max-width: 600px !important;\n margin: auto;\n display: block;\n }\n\n input {\n background-color: rgb(59, 59, 59);\n border-color: rgb(54, 54, 54);\n color: #fff;\n }\n " + } + ] + }, + { "id": 22, "type": 3, "textContent": "\n" } + ] + }, + { "id": 23, "type": 3, "textContent": "\n\n" }, + { + "id": 24, + "type": 2, + "tagName": "body", + "attributes": {}, + "childNodes": [ + { "id": 25, "type": 3, "textContent": "\n\n " }, + { + "id": 26, + "type": 2, + "tagName": "main", + "attributes": {}, + "childNodes": [ + { "id": 27, "type": 3, "textContent": "\n " }, + { + "id": 28, + "type": 2, + "tagName": "header", + "attributes": {}, + "childNodes": [ + { "id": 29, "type": 3, "textContent": "\n " }, + { + "id": 30, + "type": 2, + "tagName": "article", + "attributes": {}, + "childNodes": [ + { + "id": 31, + "type": 3, + "textContent": "\n " + }, + { + "id": 32, + "type": 2, + "tagName": "aside", + "attributes": {}, + "childNodes": [ + { + "id": 33, + "type": 3, + "textContent": "\n " + }, + { + "id": 34, + "type": 2, + "tagName": "p", + "attributes": {}, + "childNodes": [ + { + "id": 35, + "type": 3, + "textContent": "Welcome to the PostHog demo environment!" + } + ] + }, + { + "id": 36, + "type": 3, + "textContent": "\n " + }, + { + "id": 37, + "type": 2, + "tagName": "small", + "attributes": {}, + "childNodes": [ + { + "id": 38, + "type": 3, + "textContent": "\n By going through this demo you can simulate a user going through a signup funnel. " + }, + { + "id": 39, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/" + }, + "childNodes": [ + { + "id": 40, + "type": 3, + "textContent": "You can\n explore the data in PostHog within project \"Hogflix Demo App\"." + } + ] + }, + { + "id": 41, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 42, + "type": 3, + "textContent": "\n " + }, + { + "id": 43, + "type": 2, + "tagName": "p", + "attributes": {}, + "childNodes": [ + { + "id": 44, + "type": 3, + "textContent": " " + } + ] + }, + { + "id": 45, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 46, + "type": 3, + "textContent": "\n " + } + ] + }, + { "id": 47, "type": 3, "textContent": "\n " }, + { + "id": 48, + "type": 2, + "tagName": "nav", + "attributes": {}, + "childNodes": [ + { + "id": 49, + "type": 3, + "textContent": "\n " + }, + { + "id": 50, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/demo", + "style": "color: rgb(197, 197, 197)" + }, + "childNodes": [ + { + "id": 51, + "type": 3, + "textContent": "\n " + }, + { + "id": 52, + "type": 2, + "tagName": "h3", + "attributes": {}, + "childNodes": [ + { + "id": 53, + "type": 3, + "textContent": "Hogflix" + } + ] + }, + { + "id": 54, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 55, + "type": 3, + "textContent": "\n " + }, + { + "id": 56, + "type": 2, + "tagName": "ul", + "attributes": {}, + "childNodes": [ + { + "id": 57, + "type": 3, + "textContent": "\n " + }, + { + "id": 58, + "type": 2, + "tagName": "li", + "attributes": {}, + "childNodes": [ + { + "id": 59, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/demo/1" + }, + "childNodes": [ + { + "id": 60, + "type": 3, + "textContent": "Sign Up" + } + ] + } + ] + }, + { + "id": 61, + "type": 3, + "textContent": "\n " + }, + { + "id": 62, + "type": 2, + "tagName": "li", + "attributes": {}, + "childNodes": [ + { + "id": 63, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/demo/2" + }, + "childNodes": [ + { + "id": 64, + "type": 3, + "textContent": "Payment" + } + ] + } + ] + }, + { + "id": 65, + "type": 3, + "textContent": "\n " + }, + { + "id": 66, + "type": 2, + "tagName": "li", + "attributes": {}, + "childNodes": [ + { + "id": 67, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/demo/3" + }, + "childNodes": [ + { + "id": 68, + "type": 3, + "textContent": "Movies" + } + ] + } + ] + }, + { + "id": 69, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 70, + "type": 3, + "textContent": "\n " + } + ] + }, + { "id": 71, "type": 3, "textContent": "\n " } + ] + }, + { + "id": 72, + "type": 3, + "textContent": "\n\n \n\n \n \n \n " + }, + { + "id": 73, + "type": 2, + "tagName": "section", + "attributes": { "style": "margin-top: -100px" }, + "childNodes": [ + { "id": 74, "type": 3, "textContent": "\n " }, + { + "id": 75, + "type": 2, + "tagName": "header", + "attributes": {}, + "childNodes": [ + { + "id": 76, + "type": 3, + "textContent": "\n " + }, + { + "id": 77, + "type": 2, + "tagName": "h1", + "attributes": {}, + "childNodes": [ + { + "id": 78, + "type": 3, + "textContent": "Watch some Flix!" + } + ] + }, + { + "id": 79, + "type": 3, + "textContent": "\n " + } + ] + }, + { "id": 80, "type": 3, "textContent": "\n " }, + { + "id": 81, + "type": 2, + "tagName": "aside", + "attributes": {}, + "childNodes": [ + { + "id": 82, + "type": 3, + "textContent": "\n " + }, + { + "id": 83, + "type": 2, + "tagName": "img", + "attributes": { + "src": "https://m.media-amazon.com/images/M/MV5BNDc1ZTlmOWUtNDY2YS00OGU5LTg2MTYtYTk2MmQzMGE2NzUwXkEyXkFqcGdeQXVyODkzNTgxMDg@._V1_SY1000_CR0,0,675,1000_AL_.jpg", + "class": "card-img-top" + }, + "childNodes": [] + }, + { + "id": 84, + "type": 3, + "textContent": "\n " + }, + { + "id": 85, + "type": 2, + "tagName": "div", + "attributes": { "class": "card-body" }, + "childNodes": [ + { + "id": 86, + "type": 3, + "textContent": "\n " + }, + { + "id": 87, + "type": 2, + "tagName": "h5", + "attributes": { "class": "card-title" }, + "childNodes": [ + { + "id": 88, + "type": 3, + "textContent": "Sonic The Hedgehog (2020)" + } + ] + }, + { + "id": 89, + "type": 3, + "textContent": "\n " + }, + { + "id": 90, + "type": 2, + "tagName": "p", + "attributes": { "class": "card-text" }, + "childNodes": [ + { + "id": 91, + "type": 3, + "textContent": "Based on the global blockbuster videogame franchise from Sega, SONIC THE\n HEDGEHOG tells the story of the world's speediest hedgehog as he embraces his new home on Earth.\n " + } + ] + }, + { + "id": 92, + "type": 3, + "textContent": "\n " + }, + { + "id": 93, + "type": 2, + "tagName": "a", + "attributes": { + "href": "https://netflix.com/", + "target": "_blank" + }, + "childNodes": [ + { + "id": 94, + "type": 2, + "tagName": "button", + "attributes": {}, + "childNodes": [ + { + "id": 95, + "type": 3, + "textContent": "Watch now!" + } + ] + } + ] + }, + { + "id": 96, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 97, + "type": 3, + "textContent": "\n " + } + ] + }, + { "id": 98, "type": 3, "textContent": "\n " }, + { + "id": 99, + "type": 2, + "tagName": "aside", + "attributes": {}, + "childNodes": [ + { + "id": 100, + "type": 3, + "textContent": "\n " + }, + { + "id": 101, + "type": 2, + "tagName": "img", + "attributes": { + "src": "https://m.media-amazon.com/images/M/MV5BMTc0Mzg3OTQyN15BMl5BanBnXkFtZTcwODA2OTc4NQ@@._V1_SY1000_CR0,0,677,1000_AL_.jpg", + "class": "card-img-top" + }, + "childNodes": [] + }, + { + "id": 102, + "type": 3, + "textContent": "\n " + }, + { + "id": 103, + "type": 2, + "tagName": "div", + "attributes": { "class": "card-body" }, + "childNodes": [ + { + "id": 104, + "type": 3, + "textContent": "\n " + }, + { + "id": 105, + "type": 2, + "tagName": "h5", + "attributes": { "class": "card-title" }, + "childNodes": [ + { + "id": 106, + "type": 3, + "textContent": "The Hedgehog (2009)" + } + ] + }, + { + "id": 107, + "type": 3, + "textContent": "\n " + }, + { + "id": 108, + "type": 2, + "tagName": "p", + "attributes": { "class": "card-text" }, + "childNodes": [ + { + "id": 109, + "type": 3, + "textContent": "While planning her suicide, a precocious 11-year-old (Garance Le Guillermic)\n befriends a new neighbor (Togo Igawa) and a prickly recluse (Josiane Balasko)." + } + ] + }, + { + "id": 110, + "type": 3, + "textContent": "\n " + }, + { + "id": 111, + "type": 2, + "tagName": "a", + "attributes": { + "href": "https://netflix.com/", + "target": "_blank" + }, + "childNodes": [ + { + "id": 112, + "type": 2, + "tagName": "button", + "attributes": {}, + "childNodes": [ + { + "id": 113, + "type": 3, + "textContent": "Watch now!" + } + ] + } + ] + }, + { + "id": 114, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 115, + "type": 3, + "textContent": "\n " + } + ] + }, + { "id": 116, "type": 3, "textContent": "\n " }, + { + "id": 117, + "type": 2, + "tagName": "aside", + "attributes": {}, + "childNodes": [ + { + "id": 118, + "type": 3, + "textContent": "\n " + }, + { + "id": 119, + "type": 2, + "tagName": "img", + "attributes": { + "src": "https://posthog-static-files.s3.us-east-2.amazonaws.com/Product-Assets/Big_buck_bunny_poster_big.jpg", + "class": "card-img-top" + }, + "childNodes": [] + }, + { + "id": 120, + "type": 3, + "textContent": "\n " + }, + { + "id": 121, + "type": 2, + "tagName": "div", + "attributes": { "class": "card-body" }, + "childNodes": [ + { + "id": 122, + "type": 2, + "tagName": "br", + "attributes": {}, + "childNodes": [] + }, + { + "id": 123, + "type": 3, + "textContent": "\n " + }, + { + "id": 124, + "type": 2, + "tagName": "h5", + "attributes": { "class": "card-title" }, + "childNodes": [ + { + "id": 125, + "type": 3, + "textContent": "Big Buck Bunny (2008)" + } + ] + }, + { + "id": 126, + "type": 3, + "textContent": "\n " + }, + { + "id": 127, + "type": 2, + "tagName": "p", + "attributes": { "class": "card-text" }, + "childNodes": [ + { + "id": 128, + "type": 3, + "textContent": "A large and lovable rabbit deals with three tiny bullies, led by a flying\n squirrel, who are determined to squelch his happiness." + } + ] + }, + { + "id": 129, + "type": 3, + "textContent": "\n " + }, + { + "id": 130, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/demo/4" + }, + "childNodes": [ + { + "id": 131, + "type": 2, + "tagName": "button", + "attributes": {}, + "childNodes": [ + { + "id": 132, + "type": 3, + "textContent": "Watch now!" + } + ] + } + ] + }, + { + "id": 133, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 134, + "type": 3, + "textContent": "\n " + } + ] + }, + { "id": 135, "type": 3, "textContent": "\n " } + ] + }, + { + "id": 136, + "type": 3, + "textContent": "\n\n\n \n \n\n \n\n " + }, + { + "id": 137, + "type": 2, + "tagName": "script", + "attributes": {}, + "childNodes": [ + { + "id": 138, + "type": 3, + "textContent": "SCRIPT_PLACEHOLDER" + } + ] + }, + { "id": 139, "type": 3, "textContent": "\n\n\n\n" } + ] + } + ] + } + ] + } + ] + }, + "initialOffset": { "top": 0, "left": 0 } + }, + "type": 2, + "timestamp": 1611914079333 + }, + { + "data": { "source": 1, "positions": [{ "x": 513, "y": 415, "id": 101, "timeOffset": 0 }] }, + "type": 3, + "timestamp": 1611914079341 + }, + { + "data": { "source": 1, "positions": [{ "x": 516, "y": 416, "id": 101, "timeOffset": -19 }] }, + "type": 3, + "timestamp": 1611914079841 + }, + { + "data": { + "source": 1, + "positions": [ + { "x": 844, "y": 400, "id": 117, "timeOffset": -455 }, + { "x": 982, "y": 341, "id": 75, "timeOffset": -388 }, + { "x": 982, "y": 324, "id": 75, "timeOffset": -339 }, + { "x": 958, "y": 217, "id": 28, "timeOffset": -289 }, + { "x": 948, "y": 144, "id": 58, "timeOffset": -239 }, + { "x": 946, "y": 97, "id": 39, "timeOffset": -189 }, + { "x": 939, "y": 67, "id": 34, "timeOffset": -138 }, + { "x": 940, "y": 68, "id": 34, "timeOffset": -52 } + ] + }, + "type": 3, + "timestamp": 1611914080341 + }, + { + "data": { + "source": 1, + "positions": [ + { "x": 988, "y": 115, "id": 39, "timeOffset": -488 }, + { "x": 994, "y": 131, "id": 48, "timeOffset": -438 }, + { "x": 1002, "y": 152, "id": 56, "timeOffset": -371 }, + { "x": 1002, "y": 153, "id": 56, "timeOffset": -144 }, + { "x": 991, "y": 159, "id": 59, "timeOffset": -89 }, + { "x": 988, "y": 160, "id": 59, "timeOffset": -3 } + ] + }, + "type": 3, + "timestamp": 1611914080841 + }, + { "data": { "x": 987, "y": 160, "id": 59, "type": 1, "source": 2 }, "type": 3, "timestamp": 1611914080869 }, + { "data": { "id": 59, "type": 5, "source": 2 }, "type": 3, "timestamp": 1611914080875 }, + { "data": {}, "type": 0, "timestamp": 1611914082476 }, + { "data": {}, "type": 1, "timestamp": 1611914082484 }, + { + "data": { "href": "http://localhost:8000/demo/3", "width": 1276, "height": 1300 }, + "type": 4, + "timestamp": 1611914082485 + }, + { + "data": { + "node": { + "id": 1, + "type": 0, + "childNodes": [ + { + "id": 2, + "type": 2, + "tagName": "html", + "attributes": {}, + "childNodes": [ + { + "id": 3, + "type": 2, + "tagName": "head", + "attributes": {}, + "childNodes": [ + { "id": 4, "type": 3, "textContent": "\n " }, + { + "id": 5, + "type": 2, + "tagName": "title", + "attributes": {}, + "childNodes": [{ "id": 6, "type": 3, "textContent": "Hogflix" }] + }, + { "id": 7, "type": 3, "textContent": "\n " }, + { + "id": 8, + "type": 2, + "tagName": "script", + "attributes": { + "src": "http://localhost:8000/static/recorder.js?v=1.8.3", + "type": "text/javascript" + }, + "childNodes": [] + }, + { + "id": 9, + "type": 2, + "tagName": "script", + "attributes": { "src": "http://localhost:8000/static/array.js" }, + "childNodes": [] + }, + { "id": 10, "type": 3, "textContent": "\n " }, + { + "id": 11, + "type": 2, + "tagName": "script", + "attributes": {}, + "childNodes": [ + { "id": 12, "type": 3, "textContent": "SCRIPT_PLACEHOLDER" } + ] + }, + { "id": 13, "type": 3, "textContent": "\n " }, + { + "id": 14, + "type": 2, + "tagName": "link", + "attributes": { + "rel": "stylesheet", + "href": "https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css" + }, + "childNodes": [] + }, + { "id": 15, "type": 3, "textContent": "\n " }, + { + "id": 16, + "type": 2, + "tagName": "script", + "attributes": { + "src": "https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js" + }, + "childNodes": [] + }, + { "id": 17, "type": 3, "textContent": "\n " }, + { + "id": 18, + "type": 2, + "tagName": "link", + "attributes": { + "rel": "stylesheet", + "href": "https://unpkg.com/mvp.css" + }, + "childNodes": [] + }, + { "id": 19, "type": 3, "textContent": "\n\n " }, + { + "id": 20, + "type": 2, + "tagName": "style", + "attributes": {}, + "childNodes": [ + { + "id": 21, + "type": 3, + "isStyle": true, + "textContent": "\n :root {\n --color: #e9130c !important;\n --color-accent: #118bee15 !important;\n --color-bg: rgb(37, 37, 37) !important;\n --color-bg-secondary: #e9e9e9 !important;\n --color-secondary: #fa0303 !important;\n --color-secondary-accent: #eb1c1c0b !important;\n --color-shadow: #a8a8a8 !important;\n --color-text: rgb(231, 231, 231) !important;\n --color-text-secondary: rgb(212, 212, 212) !important;\n }\n\n video {\n max-width: 600px !important;\n margin: auto;\n display: block;\n }\n\n input {\n background-color: rgb(59, 59, 59);\n border-color: rgb(54, 54, 54);\n color: #fff;\n }\n " + } + ] + }, + { "id": 22, "type": 3, "textContent": "\n" } + ] + }, + { "id": 23, "type": 3, "textContent": "\n\n" }, + { + "id": 24, + "type": 2, + "tagName": "body", + "attributes": {}, + "childNodes": [ + { "id": 25, "type": 3, "textContent": "\n\n " }, + { + "id": 26, + "type": 2, + "tagName": "main", + "attributes": {}, + "childNodes": [ + { "id": 27, "type": 3, "textContent": "\n " }, + { + "id": 28, + "type": 2, + "tagName": "header", + "attributes": {}, + "childNodes": [ + { "id": 29, "type": 3, "textContent": "\n " }, + { + "id": 30, + "type": 2, + "tagName": "article", + "attributes": {}, + "childNodes": [ + { + "id": 31, + "type": 3, + "textContent": "\n " + }, + { + "id": 32, + "type": 2, + "tagName": "aside", + "attributes": {}, + "childNodes": [ + { + "id": 33, + "type": 3, + "textContent": "\n " + }, + { + "id": 34, + "type": 2, + "tagName": "p", + "attributes": {}, + "childNodes": [ + { + "id": 35, + "type": 3, + "textContent": "Welcome to the PostHog demo environment!" + } + ] + }, + { + "id": 36, + "type": 3, + "textContent": "\n " + }, + { + "id": 37, + "type": 2, + "tagName": "small", + "attributes": {}, + "childNodes": [ + { + "id": 38, + "type": 3, + "textContent": "\n By going through this demo you can simulate a user going through a signup funnel. " + }, + { + "id": 39, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/" + }, + "childNodes": [ + { + "id": 40, + "type": 3, + "textContent": "You can\n explore the data in PostHog within project \"Hogflix Demo App\"." + } + ] + }, + { + "id": 41, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 42, + "type": 3, + "textContent": "\n " + }, + { + "id": 43, + "type": 2, + "tagName": "p", + "attributes": {}, + "childNodes": [ + { + "id": 44, + "type": 3, + "textContent": " " + } + ] + }, + { + "id": 45, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 46, + "type": 3, + "textContent": "\n " + } + ] + }, + { "id": 47, "type": 3, "textContent": "\n " }, + { + "id": 48, + "type": 2, + "tagName": "nav", + "attributes": {}, + "childNodes": [ + { + "id": 49, + "type": 3, + "textContent": "\n " + }, + { + "id": 50, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/demo", + "style": "color: rgb(197, 197, 197)" + }, + "childNodes": [ + { + "id": 51, + "type": 3, + "textContent": "\n " + }, + { + "id": 52, + "type": 2, + "tagName": "h3", + "attributes": {}, + "childNodes": [ + { + "id": 53, + "type": 3, + "textContent": "Hogflix" + } + ] + }, + { + "id": 54, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 55, + "type": 3, + "textContent": "\n " + }, + { + "id": 56, + "type": 2, + "tagName": "ul", + "attributes": {}, + "childNodes": [ + { + "id": 57, + "type": 3, + "textContent": "\n " + }, + { + "id": 58, + "type": 2, + "tagName": "li", + "attributes": {}, + "childNodes": [ + { + "id": 59, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/demo/1" + }, + "childNodes": [ + { + "id": 60, + "type": 3, + "textContent": "Sign Up" + } + ] + } + ] + }, + { + "id": 61, + "type": 3, + "textContent": "\n " + }, + { + "id": 62, + "type": 2, + "tagName": "li", + "attributes": {}, + "childNodes": [ + { + "id": 63, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/demo/2" + }, + "childNodes": [ + { + "id": 64, + "type": 3, + "textContent": "Payment" + } + ] + } + ] + }, + { + "id": 65, + "type": 3, + "textContent": "\n " + }, + { + "id": 66, + "type": 2, + "tagName": "li", + "attributes": {}, + "childNodes": [ + { + "id": 67, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/demo/3" + }, + "childNodes": [ + { + "id": 68, + "type": 3, + "textContent": "Movies" + } + ] + } + ] + }, + { + "id": 69, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 70, + "type": 3, + "textContent": "\n " + } + ] + }, + { "id": 71, "type": 3, "textContent": "\n " } + ] + }, + { + "id": 72, + "type": 3, + "textContent": "\n\n \n\n \n \n \n " + }, + { + "id": 73, + "type": 2, + "tagName": "section", + "attributes": { "style": "margin-top: -100px" }, + "childNodes": [ + { "id": 74, "type": 3, "textContent": "\n " }, + { + "id": 75, + "type": 2, + "tagName": "header", + "attributes": {}, + "childNodes": [ + { + "id": 76, + "type": 3, + "textContent": "\n " + }, + { + "id": 77, + "type": 2, + "tagName": "h1", + "attributes": {}, + "childNodes": [ + { + "id": 78, + "type": 3, + "textContent": "Watch some Flix!" + } + ] + }, + { + "id": 79, + "type": 3, + "textContent": "\n " + } + ] + }, + { "id": 80, "type": 3, "textContent": "\n " }, + { + "id": 81, + "type": 2, + "tagName": "aside", + "attributes": {}, + "childNodes": [ + { + "id": 82, + "type": 3, + "textContent": "\n " + }, + { + "id": 83, + "type": 2, + "tagName": "img", + "attributes": { + "src": "https://m.media-amazon.com/images/M/MV5BNDc1ZTlmOWUtNDY2YS00OGU5LTg2MTYtYTk2MmQzMGE2NzUwXkEyXkFqcGdeQXVyODkzNTgxMDg@._V1_SY1000_CR0,0,675,1000_AL_.jpg", + "class": "card-img-top" + }, + "childNodes": [] + }, + { + "id": 84, + "type": 3, + "textContent": "\n " + }, + { + "id": 85, + "type": 2, + "tagName": "div", + "attributes": { "class": "card-body" }, + "childNodes": [ + { + "id": 86, + "type": 3, + "textContent": "\n " + }, + { + "id": 87, + "type": 2, + "tagName": "h5", + "attributes": { "class": "card-title" }, + "childNodes": [ + { + "id": 88, + "type": 3, + "textContent": "Sonic The Hedgehog (2020)" + } + ] + }, + { + "id": 89, + "type": 3, + "textContent": "\n " + }, + { + "id": 90, + "type": 2, + "tagName": "p", + "attributes": { "class": "card-text" }, + "childNodes": [ + { + "id": 91, + "type": 3, + "textContent": "Based on the global blockbuster videogame franchise from Sega, SONIC THE\n HEDGEHOG tells the story of the world's speediest hedgehog as he embraces his new home on Earth.\n " + } + ] + }, + { + "id": 92, + "type": 3, + "textContent": "\n " + }, + { + "id": 93, + "type": 2, + "tagName": "a", + "attributes": { + "href": "https://netflix.com/", + "target": "_blank" + }, + "childNodes": [ + { + "id": 94, + "type": 2, + "tagName": "button", + "attributes": {}, + "childNodes": [ + { + "id": 95, + "type": 3, + "textContent": "Watch now!" + } + ] + } + ] + }, + { + "id": 96, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 97, + "type": 3, + "textContent": "\n " + } + ] + }, + { "id": 98, "type": 3, "textContent": "\n " }, + { + "id": 99, + "type": 2, + "tagName": "aside", + "attributes": {}, + "childNodes": [ + { + "id": 100, + "type": 3, + "textContent": "\n " + }, + { + "id": 101, + "type": 2, + "tagName": "img", + "attributes": { + "src": "https://m.media-amazon.com/images/M/MV5BMTc0Mzg3OTQyN15BMl5BanBnXkFtZTcwODA2OTc4NQ@@._V1_SY1000_CR0,0,677,1000_AL_.jpg", + "class": "card-img-top" + }, + "childNodes": [] + }, + { + "id": 102, + "type": 3, + "textContent": "\n " + }, + { + "id": 103, + "type": 2, + "tagName": "div", + "attributes": { "class": "card-body" }, + "childNodes": [ + { + "id": 104, + "type": 3, + "textContent": "\n " + }, + { + "id": 105, + "type": 2, + "tagName": "h5", + "attributes": { "class": "card-title" }, + "childNodes": [ + { + "id": 106, + "type": 3, + "textContent": "The Hedgehog (2009)" + } + ] + }, + { + "id": 107, + "type": 3, + "textContent": "\n " + }, + { + "id": 108, + "type": 2, + "tagName": "p", + "attributes": { "class": "card-text" }, + "childNodes": [ + { + "id": 109, + "type": 3, + "textContent": "While planning her suicide, a precocious 11-year-old (Garance Le Guillermic)\n befriends a new neighbor (Togo Igawa) and a prickly recluse (Josiane Balasko)." + } + ] + }, + { + "id": 110, + "type": 3, + "textContent": "\n " + }, + { + "id": 111, + "type": 2, + "tagName": "a", + "attributes": { + "href": "https://netflix.com/", + "target": "_blank" + }, + "childNodes": [ + { + "id": 112, + "type": 2, + "tagName": "button", + "attributes": {}, + "childNodes": [ + { + "id": 113, + "type": 3, + "textContent": "Watch now!" + } + ] + } + ] + }, + { + "id": 114, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 115, + "type": 3, + "textContent": "\n " + } + ] + }, + { "id": 116, "type": 3, "textContent": "\n " }, + { + "id": 117, + "type": 2, + "tagName": "aside", + "attributes": {}, + "childNodes": [ + { + "id": 118, + "type": 3, + "textContent": "\n " + }, + { + "id": 119, + "type": 2, + "tagName": "img", + "attributes": { + "src": "https://posthog-static-files.s3.us-east-2.amazonaws.com/Product-Assets/Big_buck_bunny_poster_big.jpg", + "class": "card-img-top" + }, + "childNodes": [] + }, + { + "id": 120, + "type": 3, + "textContent": "\n " + }, + { + "id": 121, + "type": 2, + "tagName": "div", + "attributes": { "class": "card-body" }, + "childNodes": [ + { + "id": 122, + "type": 2, + "tagName": "br", + "attributes": {}, + "childNodes": [] + }, + { + "id": 123, + "type": 3, + "textContent": "\n " + }, + { + "id": 124, + "type": 2, + "tagName": "h5", + "attributes": { "class": "card-title" }, + "childNodes": [ + { + "id": 125, + "type": 3, + "textContent": "Big Buck Bunny (2008)" + } + ] + }, + { + "id": 126, + "type": 3, + "textContent": "\n " + }, + { + "id": 127, + "type": 2, + "tagName": "p", + "attributes": { "class": "card-text" }, + "childNodes": [ + { + "id": 128, + "type": 3, + "textContent": "A large and lovable rabbit deals with three tiny bullies, led by a flying\n squirrel, who are determined to squelch his happiness." + } + ] + }, + { + "id": 129, + "type": 3, + "textContent": "\n " + }, + { + "id": 130, + "type": 2, + "tagName": "a", + "attributes": { + "href": "http://localhost:8000/demo/4" + }, + "childNodes": [ + { + "id": 131, + "type": 2, + "tagName": "button", + "attributes": {}, + "childNodes": [ + { + "id": 132, + "type": 3, + "textContent": "Watch now!" + } + ] + } + ] + }, + { + "id": 133, + "type": 3, + "textContent": "\n " + } + ] + }, + { + "id": 134, + "type": 3, + "textContent": "\n " + } + ] + }, + { "id": 135, "type": 3, "textContent": "\n " } + ] + }, + { + "id": 136, + "type": 3, + "textContent": "\n\n\n \n \n\n \n\n " + }, + { + "id": 137, + "type": 2, + "tagName": "script", + "attributes": {}, + "childNodes": [ + { + "id": 138, + "type": 3, + "textContent": "SCRIPT_PLACEHOLDER" + } + ] + }, + { "id": 139, "type": 3, "textContent": "\n\n\n\n" } + ] + } + ] + } + ] + } + ] + }, + "initialOffset": { "top": 0, "left": 0 } + }, + "type": 2, + "timestamp": 1611914082490 + }, + { + "data": { "source": 1, "positions": [{ "x": 1120, "y": 164, "id": 67, "timeOffset": 0 }] }, + "type": 3, + "timestamp": 1611914084433 + }, + { + "data": { + "source": 1, + "positions": [ + { "x": 942, "y": 107, "id": 39, "timeOffset": -445 }, + { "x": 692, "y": 41, "id": 26, "timeOffset": -395 }, + { "x": 272, "y": 1, "id": 24, "timeOffset": -93 }, + { "x": 194, "y": 16, "id": 26, "timeOffset": -28 } + ] + }, + "type": 3, + "timestamp": 1611914084934 + }, + { + "data": { "source": 1, "positions": [{ "x": 99, "y": 36, "id": 26, "timeOffset": -479 }] }, + "type": 3, + "timestamp": 1611914085435 + } + ], + "person": { + "id": 737, + "name": "1774d90b2a432d-06cf818ba37a9e-1e2a1f04-384000-1774d90b2a5870", + "distinct_ids": ["1774d90b2a432d-06cf818ba37a9e-1e2a1f04-384000-1774d90b2a5870"], + "properties": {}, + "is_identified": false, + "created_at": "2021-01-29T09:54:26.598129Z", + "uuid": "01774d90-baa5-0000-4061-865a81bf1a15" + }, + "start_time": "2021-01-29T09:54:26.715764Z" + } +} diff --git a/playwright/mocks/events/single_person_events.json b/playwright/mocks/events/single_person_events.json new file mode 100644 index 0000000000000..4a486090d4630 --- /dev/null +++ b/playwright/mocks/events/single_person_events.json @@ -0,0 +1,132 @@ +{ + "next": null, + "results": [ + { + "id": "6e190b56-64dd-443d-832f-b889ea2df252", + "distinct_id": "01779064-53be-000c-683f-23b1a8c8eb4c", + "properties": { + "$current_url": "http://hogflix.com/3", + "$browser": "Firefox", + "$lib": "web" + }, + "event": "$pageview", + "timestamp": "2021-02-11T09:21:30.202993+00:00", + "person": { + "distinct_ids": ["01777279-ff1b-0051-1fbd-b89614430f72"], + "is_identified": true, + "properties": { "email": "smith.nunez@gmail.com" } + }, + "elements": [], + "elements_chain": "" + }, + { + "id": "fb9e0e59-04aa-42e9-b561-61ecdc258c32", + "distinct_id": "01779064-53be-000c-683f-23b1a8c8eb4c", + "properties": { + "price": 10 + }, + "event": "purchase", + "timestamp": "2021-02-11T09:21:30.202961+00:00", + "person": { + "distinct_ids": ["01777279-ff1b-0051-1fbd-b89614430f72"], + "is_identified": true, + "properties": { "email": "smith.nunez@gmail.com" } + }, + "elements": [], + "elements_chain": "" + }, + { + "id": "903ca401-5824-4907-a00a-f6dd0484fde5", + "distinct_id": "01779064-53be-000c-683f-23b1a8c8eb4c", + "properties": { + "$current_url": "http://hogflix.com/2", + "$browser": "Firefox", + "$lib": "web", + "$event_type": "click" + }, + "event": "$autocapture", + "timestamp": "2021-02-11T09:21:29.202931+00:00", + "person": { + "distinct_ids": ["01777279-ff1b-0051-1fbd-b89614430f72"], + "is_identified": true, + "properties": { "email": "smith.nunez@gmail.com" } + }, + "elements": [], + "elements_chain": "" + }, + { + "id": "730ce2d4-f73b-4517-9e9b-743cca25497d", + "distinct_id": "01779064-53be-000c-683f-23b1a8c8eb4c", + "properties": { + "$current_url": "http://hogflix.com/2", + "$browser": "Firefox", + "$lib": "web" + }, + "event": "$pageview", + "timestamp": "2021-02-11T09:21:00.202901+00:00", + "person": { + "distinct_ids": ["01777279-ff1b-0051-1fbd-b89614430f72"], + "is_identified": true, + "properties": { "email": "smith.nunez@gmail.com" } + }, + "elements": [], + "elements_chain": "" + }, + { + "id": "ef872ab0-56c5-4e46-bc87-b3bebbf0274b", + "distinct_id": "01779064-53be-000c-683f-23b1a8c8eb4c", + "properties": { + "$current_url": "http://hogflix.com/1", + "$browser": "Firefox", + "$lib": "web", + "$event_type": "click" + }, + "event": "$autocapture", + "timestamp": "2021-02-11T09:20:59.202869+00:00", + "person": { + "distinct_ids": ["01777279-ff1b-0051-1fbd-b89614430f72"], + "is_identified": true, + "properties": { "email": "smith.nunez@gmail.com" } + }, + "elements": [], + "elements_chain": "" + }, + { + "id": "b0cfbc8d-203d-4af7-b663-2308f9fab579", + "distinct_id": "01779064-53be-000c-683f-23b1a8c8eb4c", + "properties": { + "$current_url": "http://hogflix.com", + "$browser": "Firefox", + "$lib": "web", + "$event_type": "click" + }, + "event": "$autocapture", + "timestamp": "2021-02-11T09:20:44.202832+00:00", + "person": { + "distinct_ids": ["01777279-ff1b-0051-1fbd-b89614430f72"], + "is_identified": true, + "properties": { "email": "smith.nunez@gmail.com" } + }, + "elements": [], + "elements_chain": "" + }, + { + "id": "96b47179-4ab2-43da-94d8-8df753b7bb3d", + "distinct_id": "01779064-53be-000c-683f-23b1a8c8eb4c", + "properties": { + "$current_url": "http://hogflix.com", + "$browser": "Firefox", + "$lib": "web" + }, + "event": "$pageview", + "timestamp": "2021-02-11T09:20:30.202779+00:00", + "person": { + "distinct_ids": ["01777279-ff1b-0051-1fbd-b89614430f72"], + "is_identified": true, + "properties": { "email": "smith.nunez@gmail.com" } + }, + "elements": [], + "elements_chain": "" + } + ] +} diff --git a/playwright/playwright.config.ts b/playwright/playwright.config.ts index 9b9ab2ff47275..53884e61806fb 100644 --- a/playwright/playwright.config.ts +++ b/playwright/playwright.config.ts @@ -12,13 +12,13 @@ import { defineConfig, devices } from '@playwright/test' export default defineConfig({ testDir: '.', /* Maximum time one test can run for. */ - timeout: 45 * 1000, + timeout: 90 * 1000, expect: { /** * Maximum time expect() should wait for the condition to be met. * For example in `await expect(locator).toHaveText();` */ - timeout: 30 * 1000, + timeout: 45 * 1000, }, /* Run tests in files in parallel */ fullyParallel: true, @@ -26,8 +26,8 @@ export default defineConfig({ forbidOnly: !!process.env.CI, /* Retry on CI only */ retries: process.env.CI ? 8 : 2, - /* Run one worker per core in GitHub Actions. */ - workers: process.env.CI ? 4 : undefined, + /* 4 cores in GitHub Actions so run 3 workers and leave one core for all the rest */ + workers: process.env.CI ? 3 : undefined, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ reporter: [['html', { open: 'never' }]], /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */