Ember.js Octane验收测试：如何查询或设置测试窗口高度？

1. 固定测试窗口尺寸，避免布局变化触发失败 #

在测试执行前强制设置一个不会触发元素换行的窗口尺寸，确保测试环境一致：

import { run } from '@ember/runloop';

// 在测试步骤开始前设置窗口大小
await run(() => {
  window.resizeTo(1280, 720); // 选择不会导致布局换行的宽高值
});

// 后续执行原测试代码
await visit('/code-nav');
await fillIn('[data-test-code-nav-selector]', 'PDF_I10_PCS_REFERENCE_MANUAL');

// ... 原测试逻辑

如果需要验证窄屏场景，可以在单独测试用例中设置对应尺寸，专门做针对性验证。

2. 动态计算variance，替代硬编码值 #

硬写的136只适用于特定布局，当元素换行时布局结构变化，这个值就不再准确。通过动态计算元素的盒模型数据来获取真实差值：

// 辅助函数：获取元素的计算后盒模型数据
const getBoxDimensions = (element) => {
  const style = window.getComputedStyle(element);
  return {
    paddingTop: parseFloat(style.paddingTop),
    paddingBottom: parseFloat(style.paddingBottom),
    borderTop: parseFloat(style.borderTopWidth),
    borderBottom: parseFloat(style.borderBottomWidth),
    marginTop: parseFloat(style.marginTop),
    marginBottom: parseFloat(style.marginBottom),
  };
};

// 执行原测试步骤到获取元素
await visit('/code-nav');
await fillIn('[data-test-code-nav-selector]', 'PDF_I10_PCS_REFERENCE_MANUAL');

let applicationYieldWrapper = find('[data-test-application-yield-wrapper]');
await waitFor('[data-test-pdf-viewer]');
let pdfViewer = find('[data-test-pdf-viewer]');

// 根据实际布局计算真实variance
const wrapperBox = getBoxDimensions(applicationYieldWrapper);
const viewerBox = getBoxDimensions(pdfViewer);

// 示例计算逻辑：容器内边距+边框 + 查看器外边距总和
const variance = (wrapperBox.paddingTop + wrapperBox.paddingBottom + wrapperBox.borderTop + wrapperBox.borderBottom) + (viewerBox.marginTop + viewerBox.marginBottom);

// 或者更直观的断言：直接验证查看器底部是否与容器底部对齐
const viewerBottom = pdfViewer.offsetTop + pdfViewer.offsetHeight;
assert.equal(viewerBottom, applicationYieldWrapper.offsetHeight, 'PDF查看器应完全填满容器高度');

这种方式会自动适配布局变化，不管元素是否换行，都能准确验证尺寸关系。

3. 分场景测试不同屏幕尺寸 #

如果需要确保窄屏情况下布局依然正常，可以专门编写测试用例覆盖该场景：

test('PDF查看器在窄屏时尺寸正确', async function(assert) {
  // 设置窄屏尺寸
  await run(() => {
    window.resizeTo(375, 667); // 模拟手机屏幕
  });

  await visit('/code-nav');
  await fillIn('[data-test-code-nav-selector]', 'PDF_I10_PCS_REFERENCE_MANUAL');
  await waitFor('[data-test-pdf-viewer]');

  let applicationYieldWrapper = find('[data-test-application-yield-wrapper]');
  let pdfViewer = find('[data-test-pdf-viewer]');

  // 针对窄屏布局编写特定断言
  const viewerBottom = pdfViewer.offsetTop + pdfViewer.offsetHeight;
  assert.equal(viewerBottom, applicationYieldWrapper.offsetHeight, '窄屏时PDF查看器仍填满容器高度');
});

这样既能覆盖正常场景，也能验证窄屏情况下的布局正确性，避免测试随机失败。

内容的提问来源于stack exchange，提问作者Display name