TestBrowser/geolocation.html at main · piyushryn/TestBrowser · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Geolocation Test Page</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
      }
      h1 {
        color: #333;
      }
      .log {
        margin-top: 20px;
        padding: 10px;
        border: 1px solid #ccc;
        height: 200px;
        overflow-y: scroll;
      }
      button {
        padding: 10px 20px;
        margin-top: 10px;
        cursor: pointer;
      }
      .success {
        color: green;
      }
      .error {
        color: red;
      }
      .info {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Geolocation Edge Case Testing</h1>
    <p>
      Click the button below to test location access under various conditions.
      Results will be logged below.
    </p>

    <button onclick="testGeolocation()">Test Location Access</button>

    <div class="log" id="logOutput">
      <!-- Logs will appear here -->
    </div>

    <script>
      let currentPosition = null;
      if (!navigator.geolocation) {
        logMessage("Geolocation is not supported by your browser", "error");
      }
      if (!navigator.permissions) {
        logMessage("Permissions API is not supported by your browser", "error");
      }
      if (currentPosition) {
        logMessage("Current position is cached");
      }

      // Shared function: Get current position with caching
      function getCurrentPosition(options) {
        const { timeout } = options;
        return new Promise((resolve, reject) => {
          const startTime = performance.now(); // Start timing
          if (currentPosition) {
            logMessage("Using cached position...", "info");
            logTimeTaken(startTime); // Log time for cached position
            return resolve(currentPosition);
          }
          return navigator.geolocation.getCurrentPosition(
            (position) => {
              currentPosition = position;
              logMessage("Location retrieved successfully!", "success");
              logTimeTaken(startTime); // Log time for new position retrieval
              return resolve(position);
            },
            (error) => {
              logMessage(
                "Error getting position: " +
                  error.message +
                  " error code: " +
                  error.code,
                "error"
              );
              logTimeTaken(startTime); // Log time for error
              return reject(error);
            },
            { timeout }
          );
        });
      }

      // Shared function: Get user location with geocoding lookup (mocked)
      async function getUserLocation(onLocationAccessSuccess) {
        try {
          const { coords } = await getCurrentPosition({ timeout: 10 * 1000 });
          onLocationAccessSuccess();

          // Mocked address lookup (replace with actual SDK)
          const address = await lookupGeoCoordsThroughSdk(coords);

          return {
            longitude: coords.longitude.toString(),
            latitude: coords.latitude.toString(),
            address,
          };
        } catch (error) {
          logMessage(
            "Failed to get user location: " +
              error.message +
              " error code: " +
              error.code,
            "error"
          );
          return null;
        }
      }

      // Mocked SDK function for geocoding lookup
      async function lookupGeoCoordsThroughSdk(coords) {
        logMessage("Looking up address for coordinates...", "info");
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve(
              `Mocked address for (${coords.latitude}, ${coords.longitude})`
            );
          }, 2000); // Simulate async delay
        });
      }

      // Test the geolocation with logging
      async function testGeolocation() {
        logMessage("Starting geolocation test...", "info");

        try {
          const result = await getUserLocation(() => {
            logMessage("Location access successful!", "success");
          });

          if (result) {
            logMessage(
              `Location: ${result.latitude}, ${result.longitude}`,
              "success"
            );
            logMessage(`Address: ${result.address}`, "success");
          }
        } catch (error) {
          logMessage(
            "Failed to get user location: " +
              error.message +
              " error code: " +
              error.code,
            "error"
          );
        }
      }

      // Utility to log messages to the log box
      function logMessage(message, type) {
        const logBox = document.getElementById("logOutput");
        const msgElement = document.createElement("div");
        msgElement.textContent = message;
        msgElement.classList.add(type);
        logBox.appendChild(msgElement);
        logBox.scrollTop = logBox.scrollHeight;
      }

      // Utility to log the time taken
      function logTimeTaken(startTime) {
        const endTime = performance.now();
        const timeTaken = (endTime - startTime).toFixed(2);
        logMessage(`Time taken: ${timeTaken} ms`, "info");
      }
    </script>
  </body>
</html>