Supplement the E2E test for skywalking-client-js (#6409)

.github/workflows/e2e.cluster.yaml

@@ -55,11 +55,6 @@ jobs:
         uses: ./.github/actions/e2e-test
         with:
           test_class: org.apache.skywalking.e2e.ClusterE2E
-      - uses: actions/upload-artifact@v1
-        if: failure()
-        with:
-          name: logs
-          path: logs
 
   Cluster:
     runs-on: ubuntu-latest

.github/workflows/e2e.compat.yaml

@@ -53,9 +53,4 @@ jobs:
         if: env.SKIP_CI != 'true'
         uses: ./.github/actions/e2e-test
         with:
-          test_class: org.apache.skywalking.e2e.simple.SimpleE2E
-      - uses: actions/upload-artifact@v1
-        if: failure()
-        with:
-          name: logs
-          path: logs
+          test_class: org.apache.skywalking.e2e.simple.SimpleE2E
\ No newline at end of file

.github/workflows/e2e.go.yaml

@@ -50,9 +50,4 @@ jobs:
         if: env.SKIP_CI != 'true'
         uses: ./.github/actions/e2e-test
         with:
-          test_class: org.apache.skywalking.e2e.GOE2E
-      - uses: actions/upload-artifact@v1
-        if: failure()
-        with:
-          name: logs
-          path: logs
+          test_class: org.apache.skywalking.e2e.GOE2E
\ No newline at end of file

.github/workflows/e2e.jdk-versions.yaml

@@ -58,11 +58,6 @@ jobs:
         uses: ./.github/actions/e2e-test
         with:
           test_class: org.apache.skywalking.e2e.simple.SimpleE2E
-      - uses: actions/upload-artifact@v1
-        if: failure()
-        with:
-          name: logs
-          path: logs
 
   Single:
     runs-on: ubuntu-latest

.github/workflows/e2e.js.yaml

@@ -33,7 +33,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        storage: ['h2', 'mysql', 'es6', 'es7', 'influxdb']
+        storage: [ 'h2', 'mysql', 'es6', 'es7', 'influxdb' ]
     env:
       SW_STORAGE: ${{ matrix.storage }}
     steps:
@@ -55,8 +55,25 @@ jobs:
         uses: ./.github/actions/e2e-test
         with:
           test_class: org.apache.skywalking.e2e.browser.BrowserE2E
-      - uses: actions/upload-artifact@v1
-        if: failure()
+  JavaScriptClientWithRealAgent:
+    name: Java Script Client With Real Agent
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          submodules: true
+      - name: Set Skip Env Var
+        uses: ./.github/actions/skip
+      - name: Cache local Maven repository
+        if: env.SKIP_CI != 'true'
+        uses: actions/cache@v2
+        with:
+          path: ~/.m2/repository
+          key: ${{ runner.os }}-maven-${{ hashFiles('**/pom.xml') }}
+          restore-keys: |
+            ${{ runner.os }}-maven-
+      - name: Run E2E Test
+        if: env.SKIP_CI != 'true'
+        uses: ./.github/actions/e2e-test
         with:
-          name: logs
-          path: logs
+          test_class: org.apache.skywalking.e2e.browser.BrowserWithClientJSE2E
\ No newline at end of file

.github/workflows/e2e.kafka.yaml

@@ -62,9 +62,4 @@ jobs:
         if: env.SKIP_CI != 'true'
         uses: ./.github/actions/e2e-test
         with:
-          test_class: ${{ matrix.case.class }}
-      - uses: actions/upload-artifact@v1
-        if: failure()
-        with:
-          name: logs
-          path: logs
+          test_class: ${{ matrix.case.class }}
\ No newline at end of file

.github/workflows/e2e.log.yaml

@@ -54,9 +54,4 @@ jobs:
         if: env.SKIP_CI != 'true'
         uses: ./.github/actions/e2e-test
         with:
-          test_class: org.apache.skywalking.e2e.log.LogE2E
-      - uses: actions/upload-artifact@v1
-        if: failure()
-        with:
-          name: logs
-          path: logs
+          test_class: org.apache.skywalking.e2e.log.LogE2E
\ No newline at end of file

.github/workflows/e2e.php.yaml

@@ -47,9 +47,4 @@ jobs:
         if: env.SKIP_CI != 'true'
         uses: ./.github/actions/e2e-test
         with:
-          test_class: org.apache.skywalking.e2e.PHPE2E
-      - uses: actions/upload-artifact@v1
-        if: failure()
-        with:
-          name: logs
-          path: logs
+          test_class: org.apache.skywalking.e2e.PHPE2E
\ No newline at end of file

.github/workflows/e2e.profiling.yaml

@@ -55,9 +55,4 @@ jobs:
         if: env.SKIP_CI != 'true'
         uses: ./.github/actions/e2e-test
         with:
-          test_class: org.apache.skywalking.e2e.profile.ProfileE2E
-      - uses: actions/upload-artifact@v1
-        if: failure()
-        with:
-          name: logs
-          path: logs
+          test_class: org.apache.skywalking.e2e.profile.ProfileE2E
\ No newline at end of file

.github/workflows/e2e.python.yaml

@@ -50,9 +50,4 @@ jobs:
         if: env.SKIP_CI != 'true'
         uses: ./.github/actions/e2e-test
         with:
-          test_class: org.apache.skywalking.e2e.PythonE2E
-      - uses: actions/upload-artifact@v1
-        if: failure()
-        with:
-          name: logs
-          path: logs
+          test_class: org.apache.skywalking.e2e.PythonE2E
\ No newline at end of file

.github/workflows/e2e.so11y.yaml

@@ -51,8 +51,3 @@ jobs:
         uses: ./.github/actions/e2e-test
         with:
           test_class: org.apache.skywalking.e2e.SO11yE2E
-      - uses: actions/upload-artifact@v1
-        if: failure()
-        with:
-          name: logs
-          path: logs

.github/workflows/e2e.storages.yaml

@@ -53,11 +53,6 @@ jobs:
         uses: ./.github/actions/e2e-test
         with:
           test_class: org.apache.skywalking.e2e.storage.StorageE2E
-      - uses: actions/upload-artifact@v1
-        if: failure()
-        with:
-          name: logs
-          path: logs
 
   Storage:
     runs-on: ubuntu-latest

.github/workflows/e2e.ttl.yaml

@@ -55,9 +55,4 @@ jobs:
         if: env.SKIP_CI != 'true'
         uses: ./.github/actions/e2e-test
         with:
-          test_class: org.apache.skywalking.e2e.ttl.StorageTTLE2E
-      - uses: actions/upload-artifact@v1
-        if: failure()
-        with:
-          name: logs
-          path: logs
+          test_class: org.apache.skywalking.e2e.ttl.StorageTTLE2E
\ No newline at end of file

.github/workflows/e2e.yaml

@@ -57,11 +57,6 @@ jobs:
         uses: ./.github/actions/e2e-test
         with:
           test_class: org.apache.skywalking.e2e.simple.SimpleE2E
-      - uses: actions/upload-artifact@v1
-        if: failure()
-        with:
-          name: logs
-          path: logs
 
   FeatureGroup02:
     name: ${{ matrix.case.name }}
@@ -98,9 +93,4 @@ jobs:
         if: env.SKIP_CI != 'true'
         uses: ./.github/actions/e2e-test
         with:
-          test_class: ${{ matrix.case.class }}
-      - uses: actions/upload-artifact@v1
-        if: failure()
-        with:
-          name: logs
-          path: logs
+          test_class: ${{ matrix.case.class }}
\ No newline at end of file

test/e2e/e2e-test/docker/browser/docker-compose.h2.client-js.yml

+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+version: '2.1'
+
+services:
+  h2db:
+    build:
+      context: .
+      dockerfile: ../Dockerfile.h2
+    networks:
+      - e2e
+    expose:
+      - 1521
+    healthcheck:
+      test: [ "CMD", "sh", "-c", "nc -z 127.0.0.1 1521" ]
+      interval: 5s
+      timeout: 60s
+      retries: 120
+
+  oap:
+    extends:
+      file: ../base-compose.yml
+      service: oap
+    environment:
+      SW_STORAGE: h2
+      SW_STORAGE_H2_URL: jdbc:h2:tcp://h2db:1521/skywalking-oap-db
+    depends_on:
+      h2db:
+        condition: service_healthy
+
+  provider:
+    extends:
+      file: ../base-compose.yml
+      service: provider
+    depends_on:
+      oap:
+        condition: service_healthy
+
+  test-ui:
+    build:
+      context: .
+      dockerfile: with-skywalking-client-js/Dockerfile.test-ui
+    networks:
+      - e2e
+    expose:
+      - 80
+    depends_on:
+      oap:
+        condition: service_healthy
+      provider:
+        condition: service_healthy
+
+  selenium-hub:
+    image: selenium/hub:4.0.0-alpha-7-prerelease-20201009
+    networks:
+      - e2e
+    expose:
+      - 4444
+    depends_on:
+      test-ui:
+        condition: service_started
+
+  chrome:
+    image: selenium/node-chrome:4.0.0-alpha-7-prerelease-20201009
+    networks:
+      - e2e
+    volumes:
+      - /dev/shm:/dev/shm
+    depends_on:
+      selenium-hub:
+        condition: service_started
+      test-ui:
+        condition: service_started
+    environment:
+      - SE_EVENT_BUS_HOST=selenium-hub
+      - SE_EVENT_BUS_PUBLISH_PORT=4442
+      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443
+
+  generate-traffic:
+    build:
+      context: .
+      dockerfile: with-skywalking-client-js/Dockerfile.generate-traffic
+    networks:
+      - e2e
+    restart: always
+    depends_on:
+      chrome:
+        condition: service_started
+      selenium-hub:
+        condition: service_started
+      test-ui:
+        condition: service_started
+
+networks:
+  e2e:
\ No newline at end of file

test/e2e/e2e-test/docker/browser/with-skywalking-client-js/Dockerfile.generate-traffic

+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+FROM python:3.7
+
+COPY with-skywalking-client-js/test.py .
+
+RUN pip3 install selenium
+
+CMD ["python3", "/test.py"]
\ No newline at end of file

test/e2e/e2e-test/docker/browser/with-skywalking-client-js/Dockerfile.test-ui

+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+FROM node:10.23 AS builder
+
+## download and build skywalking client js
+ARG CLIENT_JS_COMMIT_HASH=e0872a96a47ee8b4d4c2f9b33b098b754a19d9bc
+ARG CLIENT_JS_CODE=${CLIENT_JS_COMMIT_HASH}.tar.gz
+ARG CLIENT_JS_CODE_URL=https://github.com/apache/skywalking-client-js/archive/${CLIENT_JS_CODE}
+
+WORKDIR /skywalking-client-js
+ADD ${CLIENT_JS_CODE_URL} .
+RUN tar -xf ${CLIENT_JS_CODE} --strip 1 && rm ${CLIENT_JS_CODE}
+RUN sed -in-place -e 's/300000/3000/g' src/trace/segment.ts \
+    && npm run rebuild \
+    && npm link
+
+# download and build skywalking client test
+ARG CLIENT_JS_TEST_COMMIT_HASH=396c2ab5b5db928de421e1bd002a9b6479e63fc2
+ARG CLIENT_JS_TEST_CODE=${CLIENT_JS_TEST_COMMIT_HASH}.tar.gz
+ARG CLIENT_JS_TEST_CODE_URL=https://github.com/SkyAPMTest/skywalking-client-test/archive/${CLIENT_JS_TEST_CODE}
+
+WORKDIR /skywalking-client-test
+ADD ${CLIENT_JS_TEST_CODE_URL} .
+RUN tar -xf ${CLIENT_JS_TEST_CODE} --strip 1 \
+    && rm ${CLIENT_JS_TEST_CODE} \
+    && rm src/index.js
+COPY with-skywalking-client-js/index.js src/index.js
+
+RUN npm install \
+    && rm -rf node_modules/skywalking-client-js \
+    && npm link skywalking-client-js \
+    && npm run build
+
+FROM nginx:1.19
+
+COPY --from=builder /skywalking-client-test/dist/* /etc/nginx/html/
+COPY with-skywalking-client-js/nginx.conf /etc/nginx/nginx.conf
\ No newline at end of file

test/e2e/e2e-test/docker/browser/with-skywalking-client-js/index.js

+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import ClientMonitor from 'skywalking-client-js';
+import Vue from 'vue';
+
+ClientMonitor.register({
+    service: 'test-ui',
+    pagePath: 'index.html',
+    serviceVersion: 'v1.0.0',
+    vue: Vue,
+    useFmp: true
+});
+
+// vue error
+new Vue({
+    methods: {
+        test() {
+            throw {
+                msg: 'vue error',
+                status: 3000
+            }
+        }
+    },
+    created() {
+        this.test();
+    }
+})
+
+fetch('/info', {
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json'
+    },
+}).then((data) => {
+    console.log(data.body);
+})
\ No newline at end of file

test/e2e/e2e-test/docker/browser/with-skywalking-client-js/nginx.conf

+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+worker_processes  auto;
+events {
+  worker_connections 1024;
+}
+http {
+  server_tokens off;
+  client_header_timeout 10;
+  client_body_timeout 10;
+  # limit_conn_zone $binary_remote_addr zone=addr:5m;
+  # limit_conn addr 100;
+  index index.html;
+  server {
+    listen 80;
+    location /browser {
+        proxy_pass http://oap:12800;
+    }
+    location /v3 {
+        proxy_pass http://oap:12800;
+    }
+    location /info {
+        proxy_pass http://provider:9090;
+    }
+  }
+}
\ No newline at end of file

test/e2e/e2e-test/docker/browser/with-skywalking-client-js/test.py

+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+import os
+import time
+
+from selenium import webdriver as wd
+from selenium.webdriver.common.desired_capabilities import DesiredCapabilities as DC
+
+hub_remote_url = os.environ.get("HUB_REMOTE_URL", "http://selenium-hub:4444/wd/hub")
+test_url = os.environ.get("TEST_URL", "http://test-ui:80/")
+
+
+def test_screenshot():
+    try:
+        driver.get(test_url)
+    except Exception as e:
+        print(e)
+
+try:
+    driver = wd.Remote(
+        command_executor=hub_remote_url,
+        desired_capabilities=DC.CHROME)
+
+    while True:
+        test_screenshot()
+        time.sleep(40)
+
+finally:
+    driver.quit()
\ No newline at end of file

test/e2e/e2e-test/src/test/java/org/apache/skywalking/e2e/browser/BrowserWithClientJSE2E.java

+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package org.apache.skywalking.e2e.browser;
+
+import java.util.List;
+import lombok.extern.slf4j.Slf4j;
+import org.apache.skywalking.e2e.annotation.ContainerHostAndPort;
+import org.apache.skywalking.e2e.annotation.DockerCompose;
+import org.apache.skywalking.e2e.base.SkyWalkingE2E;
+import org.apache.skywalking.e2e.base.SkyWalkingTestAdapter;
+import org.apache.skywalking.e2e.common.HostAndPort;
+import org.apache.skywalking.e2e.retryable.RetryableTest;
+import org.apache.skywalking.e2e.service.Service;
+import org.apache.skywalking.e2e.service.ServicesMatcher;
+import org.apache.skywalking.e2e.service.ServicesQuery;
+import org.apache.skywalking.e2e.service.endpoint.Endpoint;
+import org.apache.skywalking.e2e.service.endpoint.EndpointQuery;
+import org.apache.skywalking.e2e.service.endpoint.Endpoints;
+import org.apache.skywalking.e2e.service.endpoint.EndpointsMatcher;
+import org.apache.skywalking.e2e.service.instance.Instance;
+import org.apache.skywalking.e2e.service.instance.Instances;
+import org.apache.skywalking.e2e.service.instance.InstancesMatcher;
+import org.apache.skywalking.e2e.service.instance.InstancesQuery;
+import org.apache.skywalking.e2e.topo.Call;
+import org.apache.skywalking.e2e.topo.TopoMatcher;
+import org.apache.skywalking.e2e.topo.TopoQuery;
+import org.apache.skywalking.e2e.topo.Topology;
+import org.apache.skywalking.e2e.trace.Trace;
+import org.apache.skywalking.e2e.trace.TracesMatcher;
+import org.apache.skywalking.e2e.trace.TracesQuery;
+import org.junit.jupiter.api.BeforeAll;
+import org.testcontainers.containers.DockerComposeContainer;
+
+import static org.apache.skywalking.e2e.metrics.BrowserMetricsQuery.BROWSER_APP_ERROR_SUM;
+import static org.apache.skywalking.e2e.metrics.BrowserMetricsQuery.BROWSER_APP_PAGE_DOM_ANALYSIS_AVG;
+import static org.apache.skywalking.e2e.metrics.BrowserMetricsQuery.BROWSER_APP_PAGE_DOM_READY_AVG;
+import static org.apache.skywalking.e2e.metrics.BrowserMetricsQuery.BROWSER_APP_PAGE_DOM_READY_PERCENTILE;
+import static org.apache.skywalking.e2e.metrics.BrowserMetricsQuery.BROWSER_APP_PAGE_ERROR_SUM;
+import static org.apache.skywalking.e2e.metrics.BrowserMetricsQuery.BROWSER_APP_PAGE_JS_ERROR_SUM;
+import static org.apache.skywalking.e2e.metrics.BrowserMetricsQuery.BROWSER_APP_PAGE_LOAD_PAGE_AVG;
+import static org.apache.skywalking.e2e.metrics.BrowserMetricsQuery.BROWSER_APP_PAGE_LOAD_PAGE_PERCENTILE;
+import static org.apache.skywalking.e2e.metrics.BrowserMetricsQuery.BROWSER_APP_PAGE_PV;
+import static org.apache.skywalking.e2e.metrics.BrowserMetricsQuery.BROWSER_APP_PAGE_REDIRECT_AVG;
+import static org.apache.skywalking.e2e.metrics.BrowserMetricsQuery.BROWSER_APP_PAGE_RES_AVG;
+import static org.apache.skywalking.e2e.metrics.BrowserMetricsQuery.BROWSER_APP_PAGE_TTL_AVG;
+import static org.apache.skywalking.e2e.metrics.BrowserMetricsQuery.BROWSER_APP_PV;
+import static org.apache.skywalking.e2e.metrics.BrowserMetricsQuery.BROWSER_APP_SINGLE_VERSION_ERROR_SUM;
+import static org.apache.skywalking.e2e.metrics.BrowserMetricsQuery.BROWSER_APP_SINGLE_VERSION_PV;
+import static org.apache.skywalking.e2e.metrics.MetricsMatcher.verifyMetrics;
+import static org.apache.skywalking.e2e.metrics.MetricsMatcher.verifyPercentileMetrics;
+import static org.apache.skywalking.e2e.metrics.MetricsQuery.ALL_SERVICE_RELATION_CLIENT_METRICS;
+import static org.apache.skywalking.e2e.metrics.MetricsQuery.ALL_SERVICE_RELATION_SERVER_METRICS;
+import static org.apache.skywalking.e2e.utils.Times.now;
+import static org.apache.skywalking.e2e.utils.Yamls.load;
+
+@Slf4j
+@SkyWalkingE2E
+public class BrowserWithClientJSE2E extends SkyWalkingTestAdapter {
+
+    @SuppressWarnings("unused")
+    @DockerCompose({
+        "docker/browser/docker-compose.h2.client-js.yml"
+    })
+    private DockerComposeContainer<?> justForSideEffects;
+
+    @SuppressWarnings("unused")
+    @ContainerHostAndPort(name = "oap", port = 12800)
+    private HostAndPort swWebappHostPort;
+
+    @BeforeAll
+    public void setUp() {
+        queryClient(swWebappHostPort);
+    }
+
+    @RetryableTest
+    public void verifyBrowserData() throws Exception {
+        final List<Service> services = graphql.browserServices(new ServicesQuery().start(startTime).end(now()));
+        LOGGER.info("services: {}", services);
+
+        load("expected/browser-with-client-js/services.yml").as(ServicesMatcher.class).verify(services);
+
+        for (Service service : services) {
+            LOGGER.info("verifying service version: {}", service);
+            // browser metrics
+            verifyBrowserMetrics(service);
+            // browser single version
+            verifyBrowserSingleVersion(service);
+            // browser page path
+            verifyBrowserPagePath(service);
+        }
+    }
+
+    @RetryableTest
+    public void errorLogs() throws Exception {
+        List<BrowserErrorLog> logs = graphql.browserErrorLogs(new BrowserErrorLogQuery().start(startTime).end(now()));
+
+        LOGGER.info("errorLogs: {}", logs);
+
+        load("expected/browser-with-client-js/error-log.yml").as(BrowserErrorLogsMatcher.class).verifyLoosely(logs);
+    }
+
+    @RetryableTest
+    void traces() throws Exception {
+        final List<Trace> traces = graphql.traces(new TracesQuery().start(startTime).end(now()).orderByStartTime());
+
+        LOGGER.info("traces: {}", traces);
+
+        load("expected/browser-with-client-js/traces.yml").as(TracesMatcher.class).verifyLoosely(traces);
+    }
+
+    @RetryableTest
+    void topology() throws Exception {
+        final Topology topology = graphql.topo(new TopoQuery().stepByMinute().start(startTime.minusDays(1)).end(now()));
+
+        LOGGER.info("topology: {}", topology);
+
+        load("expected/browser-with-client-js/topo.yml").as(TopoMatcher.class).verify(topology);
+
+        verifyServiceRelationMetrics(topology.getCalls());
+    }
+
+    private static final String[] BROWSER_METRICS = {
+        BROWSER_APP_PV,
+        BROWSER_APP_ERROR_SUM
+    };
+
+    private void verifyBrowserMetrics(final Service service) throws Exception {
+        for (String metricName : BROWSER_METRICS) {
+            verifyMetrics(graphql, metricName, service.getKey(), startTime);
+        }
+    }
+
+    private void verifyBrowserSingleVersion(final Service service) throws Exception {
+        Instances instances = graphql.instances(
+            new InstancesQuery().serviceId(service.getKey()).start(startTime).end(now()));
+        LOGGER.info("instances: {}", instances);
+        load("expected/browser-with-client-js/version.yml").as(InstancesMatcher.class).verify(instances);
+        // service version metrics
+        for (Instance instance : instances.getInstances()) {
+            verifyBrowserSingleVersionMetrics(instance);
+        }
+    }
+
+    public static final String[] BROWSER_SINGLE_VERSION_METRICS = {
+        BROWSER_APP_SINGLE_VERSION_PV,
+        BROWSER_APP_SINGLE_VERSION_ERROR_SUM
+    };
+
+    private void verifyBrowserSingleVersionMetrics(Instance instance) throws Exception {
+        for (String metricName : BROWSER_SINGLE_VERSION_METRICS) {
+            verifyMetrics(graphql, metricName, instance.getKey(), startTime);
+        }
+    }
+
+    private void verifyBrowserPagePath(final Service service) throws Exception {
+        Endpoints endpoints = graphql.endpoints(new EndpointQuery().serviceId(String.valueOf(service.getKey())));
+        LOGGER.info("endpoints: {}", endpoints);
+        load("expected/browser-with-client-js/page-path.yml").as(EndpointsMatcher.class).verify(endpoints);
+        // service page metrics
+        for (Endpoint endpoint : endpoints.getEndpoints()) {
+            verifyBrowserPagePathMetrics(endpoint);
+        }
+    }
+
+    public static final String[] BROWSER_PAGE_METRICS = {
+        BROWSER_APP_PAGE_PV,
+        BROWSER_APP_PAGE_ERROR_SUM,
+        BROWSER_APP_PAGE_JS_ERROR_SUM,
+        BROWSER_APP_PAGE_REDIRECT_AVG,
+        BROWSER_APP_PAGE_DOM_ANALYSIS_AVG,
+        BROWSER_APP_PAGE_DOM_READY_AVG,
+        BROWSER_APP_PAGE_LOAD_PAGE_AVG,
+        BROWSER_APP_PAGE_RES_AVG,
+        BROWSER_APP_PAGE_TTL_AVG,
+        };
+
+    public static final String[] BROWSER_PAGE_MULTIPLE_LINEAR_METRICS = {
+        BROWSER_APP_PAGE_DOM_READY_PERCENTILE,
+        BROWSER_APP_PAGE_LOAD_PAGE_PERCENTILE,
+        };
+
+    private void verifyBrowserPagePathMetrics(Endpoint endpoint) throws Exception {
+        for (String metricName : BROWSER_PAGE_METRICS) {
+            verifyMetrics(graphql, metricName, endpoint.getKey(), startTime);
+        }
+
+        for (String metricName : BROWSER_PAGE_MULTIPLE_LINEAR_METRICS) {
+            verifyPercentileMetrics(graphql, metricName, endpoint.getKey(), startTime);
+        }
+    }
+
+    private void verifyServiceRelationMetrics(final List<Call> calls) throws Exception {
+        verifyRelationMetrics(calls, ALL_SERVICE_RELATION_CLIENT_METRICS, ALL_SERVICE_RELATION_SERVER_METRICS);
+    }
+
+    private void verifyRelationMetrics(final List<Call> calls,
+                                       final String[] relationClientMetrics,
+                                       final String[] relationServerMetrics) throws Exception {
+        for (Call call : calls) {
+            for (String detectPoint : call.getDetectPoints()) {
+                switch (detectPoint) {
+                    case "CLIENT": {
+                        for (String metricName : relationClientMetrics) {
+                            verifyMetrics(graphql, metricName, call.getId(), startTime);
+                        }
+                        break;
+                    }
+                    case "SERVER": {
+                        for (String metricName : relationServerMetrics) {
+                            verifyMetrics(graphql, metricName, call.getId(), startTime);
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+    }
+}

test/e2e/e2e-test/src/test/resources/expected/browser-with-client-js/error-log.yml

+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+logs:
+  - service: "test-ui"
+    serviceVersion: "v1.0.0"
+    time: not null
+    pagePath: "index.html"
+    grade: not null
+    category: not null
+    message: not null
\ No newline at end of file

test/e2e/e2e-test/src/test/resources/expected/browser-with-client-js/page-path.yml

+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+endpoints:
+  - key: dGVzdC11aQ==.1_aW5kZXguaHRtbA==
+    label: index.html
\ No newline at end of file

test/e2e/e2e-test/src/test/resources/expected/browser-with-client-js/services.yml

+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+services:
+  - key: dGVzdC11aQ==.1
+    label: "test-ui"
\ No newline at end of file

test/e2e/e2e-test/src/test/resources/expected/browser-with-client-js/topo.yml

+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+nodes:
+  - id: dGVzdC11aTxicm93c2VyPg==.1
+    name: test-ui<browser>
+    isReal: true
+  - id: WW91cl9BcHBsaWNhdGlvbk5hbWU=.1
+    name: Your_ApplicationName
+    type: Tomcat
+    isReal: true
+  - id: bG9jYWxob3N0Oi0x.0
+    name: localhost:-1
+    type: H2
+    isReal: false
+calls:
+  - id: WW91cl9BcHBsaWNhdGlvbk5hbWU=.1-bG9jYWxob3N0Oi0x.0
+    source: WW91cl9BcHBsaWNhdGlvbk5hbWU=.1
+    detectPoints:
+      - CLIENT
+    target: bG9jYWxob3N0Oi0x.0
+  - id: dGVzdC11aTxicm93c2VyPg==.1-WW91cl9BcHBsaWNhdGlvbk5hbWU=.1
+    source: dGVzdC11aTxicm93c2VyPg==.1
+    detectPoints:
+      - CLIENT
+      - SERVER
+    target: WW91cl9BcHBsaWNhdGlvbk5hbWU=.1
\ No newline at end of file

test/e2e/e2e-test/src/test/resources/expected/browser-with-client-js/traces.yml

+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+traces:
+  - key: not null
+    endpointNames:
+      - index.html
+    duration: ge 0
+    start: gt 0
+    isError: false
+    traceIds:
+      - not null
+  - key: not null
+    endpointNames:
+      - /info
+    duration: ge 0
+    start: gt 0
+    isError: false
+    traceIds:
+      - not null
\ No newline at end of file

test/e2e/e2e-test/src/test/resources/expected/browser-with-client-js/version.yml

+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+instances:
+  - key: dGVzdC11aQ==.1_djEuMC4w
+    label: v1.0.0
\ No newline at end of file